@extends('layouts.master')

@section('title', 'Assets')

@push('before-css')
    @include('layouts.datatable_css')
    <link rel="stylesheet" href="{{ asset('plugin/select2/select2.min.css') }}">
@endpush

@section('content')
    <section class="">
        <div class="content p-4">
            <div class="row pt-3">
                <div class="col-md-6">
                    <h3 class="">{{ __('lang.asset_list') }}</h3>
                </div>
                <div class="col-md-6 text-md-end pb-md-0 pb-3">
                    @can('create-Asset')
                        <button type="button" class="btn btn-sm btn-fill btn-primary btnadd"><i class="fa fa-plus"></i> {{ __('lang.add_data') }}</button>
                    @endcan
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-4">
                                        <label for="filtercompanyid">{{ __('lang.select_company') }}</label>
                                        <select id="filtercompanyid" class="form-select" required>
                                            <option value="">{{ __('lang.all_company') }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label for="filterstatus">{{ __('lang.status') }}</label>
                                    <select id="filterstatus" class="form-select" required>
                                        <option value="">{{ __('lang.status') }}</option>
                                        @foreach ($status as $statusId => $statusName)
                                            <option value="{{ $statusId }}" {{ request()->status == $statusId ? 'selected' : '' }}>{{ $statusName }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="filtercity">{{ __('lang.city') }}</label>
                                    <select id="filtercity" class="form-select" required>
                                        <option value="">{{ __('lang.city') }}</option>
                                        @foreach ($cities as $cityId => $cityName)
                                            <option value="{{ $cityId }}">{{ $cityName }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{ $dataTable->table(['class' => 'table table-striped', 'width' => '100%'], true) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--add new data -->
        <div id="add" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <form action="{{ route('assets.store') }}" method="POST" id="formadd" enctype="multipart/form-data" autocomplete="off">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('lang.add_data') }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="name">{{ __('lang.name') }}</label>
                                    <input type="text" name="name" id="name" class=" form-control" placeholder="{{ __('lang.name') }}" required>
                                    <label id="name-error" class="error" for="name" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="companyid">{{ __('lang.company') }}</label>
                                    <select name="companyid" id="companyid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.company') }}</option>
                                    </select>
                                    <label id="companyid-error" class="error" for="companyid" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="assettag">{{ __('lang.assettag') }}</label>
                                    <input type="text" name="assettag" id="assettag" class="form-control" placeholder="{{ __('lang.assettag') }}" required>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="supplierid">{{ __('lang.supplier') }}</label>
                                    <select name="supplierid" id="supplierid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.supplier') }}</option>
                                    </select>
                                    <label id="supplierid-error" class="error" for="supplierid" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="locationid">{{ __('lang.location_document') }}</label>
                                    <select name="locationid" id="locationid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.location_document') }}</option>
                                    </select>
                                    <label id="locationid-error" class="error" for="locationid" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="city_name">{{ __('lang.location_city') }}</label>
                                    <input type="text" name="city_name" id="city_name" class="form-control" placeholder="{{ __('lang.location_city') }}" required>
                                    <label id="city_name-error" class="error" for="city_name" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="brandid">{{ __('lang.brand') }}</label>
                                    <select name="brandid" id="brandid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.brand') }}</option>
                                    </select>
                                    <label id="brandid-error" class="error" for="brandid" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="serial">{{ __('lang.serial') }}</label>
                                    <input type="text" name="serial" id="serial" class="form-control" placeholder="{{ __('lang.serial') }}" required>
                                    <label id="serial-error" class="error" for="serial" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="typeid">{{ __('lang.assettype') }}</label>
                                    <select name="typeid" id="typeid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.assettype') }}</option>
                                    </select>
                                    <label id="typeid-error" class="error" for="typeid" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="certificate_type">{{ __('lang.certificate_type') }}</label>
                                    <select name="certificate_type" id="certificate_type" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.certificate_type') }}</option>
                                        <option value="asli">Asli</option>
                                        <option value="fotocopy">Fotocopy</option>
                                    </select>
                                    <label id="certificate_type-error" class="error" for="certificate_type" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="cost" class="control-label">{{ __('lang.cost') }}</label>
                                    <div class="input-group mb-0 d-none">
                                        <span class="input-group-text setcurrency border-1" id="currency"></span>
                                    </div>
                                    <div class="input-group mb-0">
                                        <input type="number" name="cost" id="cost" class="form-control" placeholder="{{ __('lang.cost') }}" min="0" required>
                                        <span class="input-group-text">m<sup>2</sup></span>
                                    </div>
                                    <label id="cost-error" class="error" for="cost" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="purchasedate" class="control-label">{{ __('lang.purchasedate') }}</label>
                                    <input type="date" name="purchasedate" id="purchasedate" class="form-control setdate" placeholder="{{ __('lang.purchasedate') }}" requiredx>
                                    <label id="purchasedate-error" class="error" for="purchasedate" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="warranty" class="control-label">{{ __('lang.warranty') }}</label>
                                    <div class="input-group mb-0">
                                        <input type="text" name="warranty" id="warranty" class="form-control number" placeholder="{{ __('lang.warranty') }}">
                                        <span class="input-group-text">{{ __('lang.day') }}</span>
                                    </div>
                                    <label id="warranty-error" class="error" for="warranty" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="category_id">{{ __('lang.category') }}</label>
                                    <select name="category_id" id="category_id" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.category') }}</option>
                                        @foreach ($categories as $id => $name)
                                            <option value="{{ $id }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                    <label id="category_id-error" class="error" for="category_id" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="status">{{ __('lang.status') }}</label>
                                    <select name="status" id="status" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.status') }}</option>
                                        @foreach ($status as $statusId => $statusName)
                                            <option value="{{ $statusId }}">{{ $statusName }}</option>
                                        @endforeach
                                    </select>
                                    <label id="status-error" class="error" for="status" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="status_perkara">{{ __('lang.status_perkara') }}</label>
                                    <input type="text" name="status_perkara" id="status_perkara" class="form-control" placeholder="{{ __('lang.status_perkara') }}" required>
                                    <label id="status_perkara-error" class="error" for="status_perkara" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="npop">{{ __('lang.npop') }}</label>
                                    <input type="text" name="npop" id="npop" class="form-control" placeholder="{{ __('lang.npop') }}" required>
                                    <label id="npop-error" class="error" for="npop" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="status_asuransi">{{ __('lang.status_asuransi') }}</label>
                                    <input type="text" name="status_asuransi" id="status_asuransi" class="form-control" placeholder="{{ __('lang.status_asuransi') }}" required>
                                    <label id="status_asuransi-error" class="error" for="status_asuransi" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="koordinat">{{ __('lang.koordinat') }}</label>
                                    <input type="text" name="koordinat" id="koordinat" class="form-control" placeholder="{{ __('lang.koordinat') }}" required>
                                    <label id="koordinat-error" class="error" for="koordinat" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="pencatatan_aset">{{ __('lang.pencatatan_aset') }}</label>
                                    <input type="text" name="pencatatan_aset" id="pencatatan_aset" class="form-control" placeholder="{{ __('lang.pencatatan_aset') }}" required>
                                    <label id="pencatatan_aset-error" class="error" for="pencatatan_aset" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="nomor_induk_bidang">{{ __('lang.nomor_induk_bidang') }}</label>
                                    <input type="text" name="nomor_induk_bidang" id="nomor_induk_bidang" class="form-control" placeholder="{{ __('lang.nomor_induk_bidang') }}" required>
                                    <label id="nomor_induk_bidang-error" class="error" for="nomor_induk_bidang" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="status_pembayaran_pbb">{{ __('lang.nomor_njop') }}</label>
                                    <textarea name="status_pembayaran_pbb" id="status_pembayaran_pbb" class="form-control" placeholder="{{ __('lang.nomor_njop') }}" required></textarea>
                                    <label id="status_pembayaran_pbb-error" class="error" for="status_pembayaran_pbb" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="description">{{ __('lang.notes') }}</label>
                                <textarea name="description" id="description" class="form-control" placeholder="{{ __('lang.notes') }}"></textarea>
                                <label id="description-error" class="error" for="description" style="display: none;"></label>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="picture">{{ __('lang.document') }}</label>
                                    <input type="file" name="picture" id="picture" class="form-control">
                                    <label id="picture-error" class="error" for="picture" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="photo">{{ __('lang.photo') }}</label>
                                    <input type="file" name="photo" id="photo" class="form-control" accept="image/*">
                                    <label id="photo-error" class="error" for="photo" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="pic_name">PIC Name</label>
                                    <input type="text" name="pic_name" id="pic_name" class="form-control" placeholder="PIC Name" required>
                                    <label id="pic_name-error" class="error" for="pic_name" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="pic_phone">PIC Phone</label>
                                    <input type="text" name="pic_phone" id="pic_phone" class="form-control phone" placeholder="PIC Phone" required>
                                    <label id="pic_phone-error" class="error" for="pic_phone" style="display: none;"></label>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="submit" id="save" class="btn btn-primary">{{ __('lang.save') }}</button>
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('lang.close') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end add data-->

        <!--edit new data -->
        <div id="edit" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <form action="#" method="POST" id="formedit" enctype="multipart/form-data">
                        @method('PUT')
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('lang.edit_data') }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editname">{{ __('lang.name') }}</label>
                                    <input type="text" name="name" id="editname" class=" form-control" placeholder="{{ __('lang.name') }}" required>
                                    <label id="editname-error" class="error" for="editname" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editcompanyid">{{ __('lang.company') }}</label>
                                    <select name="companyid" id="editcompanyid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.company') }}</option>
                                    </select>
                                    <label id="editcompanyid-error" class="error" for="editcompanyid" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editassettag">{{ __('lang.assettag') }}</label>
                                    <input type="text" name="assettag" id="editassettag" class="form-control" placeholder="{{ __('lang.assettag') }}" required>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editsupplierid">{{ __('lang.supplier') }}</label>
                                    <select name="supplierid" id="editsupplierid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.supplier') }}</option>
                                    </select>
                                    <label id="editsupplierid-error" class="error" for="editsupplierid" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editlocationid">{{ __('lang.location_document') }}</label>
                                    <select name="locationid" id="editlocationid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.location_document') }}</option>
                                    </select>
                                    <label id="editlocationid-error" class="error" for="editlocationid" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editcity_name">{{ __('lang.location_city') }}</label>
                                    <input type="text" name="city_name" id="editcity_name" class="form-control" placeholder="{{ __('lang.location_city') }}" required>
                                    <label id="editcity_name-error" class="error" for="editcity_name" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editbrandid">{{ __('lang.brand') }}</label>
                                    <select name="brandid" id="editbrandid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.brand') }}</option>
                                    </select>
                                    <label id="editbrandid-error" class="error" for="editbrandid" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editserial">{{ __('lang.serial') }}</label>
                                    <input type="text" name="serial" id="editserial" class="form-control" placeholder="{{ __('lang.serial') }}" required>
                                    <label id="editserial-error" class="error" for="editserial" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="edittypeid">{{ __('lang.assettype') }}</label>
                                    <select name="typeid" id="edittypeid" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.assettype') }}</option>
                                    </select>
                                    <label id="edittypeid-error" class="error" for="edittypeid" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editcertificate_type">{{ __('lang.certificate_type') }}</label>
                                    <select name="certificate_type" id="editcertificate_type" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.certificate_type') }}</option>
                                        <option value="asli">Asli</option>
                                        <option value="fotocopy">Fotocopy</option>
                                    </select>
                                    <label id="editcertificate_type-error" class="error" for="editcertificate_type" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editcost" class="control-label">{{ __('lang.cost') }}</label>
                                    <div class="input-group mb-0 d-none">
                                        <span id="editcurrency" class="input-group-text setcurrency border-1"></span>
                                    </div>
                                    <div class="input-group mb-0">
                                        <input type="number" name="cost" id="editcost" class="form-control" placeholder="{{ __('lang.cost') }}" min="0" required>
                                        <span class="input-group-text">m<sup>2</sup></span>
                                    </div>
                                    <label id="editcost-error" class="error" for="editcost" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editpurchasedate" class="control-label">{{ __('lang.purchasedate') }}</label>
                                    <input type="date" name="purchasedate" id="editpurchasedate" class="form-control setdate" placeholder="{{ __('lang.purchasedate') }}" requiredx>
                                    <label id="editpurchasedate-error" class="error" for="editpurchasedate" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editwarranty" class="control-label">{{ __('lang.warranty') }}</label>
                                    <div class="input-group mb-0">
                                        <input type="text" name="warranty" id="editwarranty" class="form-control number" placeholder="{{ __('lang.warranty') }}">
                                        <span id="editwarrantyyear" class="input-group-text border-1">{{ __('lang.day') }}</span>
                                    </div>
                                    <label id="editwarranty-error" class="error" for="editwarranty" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editcategory_id">{{ __('lang.category') }}</label>
                                    <select name="category_id" id="editcategory_id" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.category') }}</option>
                                        @foreach ($categories as $id => $name)
                                            <option value="{{ $id }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                    <label id="editcategory_id-error" class="error" for="editcategory_id" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editstatus">{{ __('lang.status') }}</label>
                                    <select name="status" id="editstatus" class="form-select" required>
                                        <option value="">{{ __('lang.select') }} {{ __('lang.status') }}</option>
                                        @foreach ($status as $statusId => $statusName)
                                            <option value="{{ $statusId }}">{{ $statusName }}</option>
                                        @endforeach
                                    </select>
                                    <label id="editstatus-error" class="error" for="editstatus" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editstatus_perkara">{{ __('lang.status_perkara') }}</label>
                                    <input type="text" name="status_perkara" id="editstatus_perkara" class="form-control" placeholder="{{ __('lang.status_perkara') }}" required>
                                    <label id="editstatus_perkara-error" class="error" for="editstatus_perkara" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editnpop">{{ __('lang.npop') }}</label>
                                    <input type="text" name="npop" id="editnpop" class="form-control" placeholder="{{ __('lang.npop') }}" required>
                                    <label id="editnpop-error" class="error" for="editnpop" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editstatus_asuransi">{{ __('lang.status_asuransi') }}</label>
                                    <input type="text" name="status_asuransi" id="editstatus_asuransi" class="form-control" placeholder="{{ __('lang.status_asuransi') }}" required>
                                    <label id="editstatus_asuransi-error" class="error" for="editstatus_asuransi" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editkoordinat">{{ __('lang.koordinat') }}</label>
                                    <input type="text" name="koordinat" id="editkoordinat" class="form-control" placeholder="{{ __('lang.koordinat') }}" required>
                                    <label id="editkoordinat-error" class="error" for="editkoordinat" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editpencatatan_aset">{{ __('lang.pencatatan_aset') }}</label>
                                    <input type="text" name="pencatatan_aset" id="editpencatatan_aset" class="form-control" placeholder="{{ __('lang.pencatatan_aset') }}" required>
                                    <label id="editpencatatan_aset-error" class="error" for="editpencatatan_aset" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editnomor_induk_bidang">{{ __('lang.nomor_induk_bidang') }}</label>
                                    <input type="text" name="nomor_induk_bidang" id="editnomor_induk_bidang" class="form-control" placeholder="{{ __('lang.nomor_induk_bidang') }}" required>
                                    <label id="editnomor_induk_bidang-error" class="error" for="editnomor_induk_bidang" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="editstatus_pembayaran_pbb">{{ __('lang.nomor_njop') }}</label>
                                    <textarea name="status_pembayaran_pbb" id="editstatus_pembayaran_pbb" class="form-control" placeholder="{{ __('lang.nomor_njop') }}" required></textarea>
                                    <label id="editstatus_pembayaran_pbb-error" class="error" for="editstatus_pembayaran_pbb" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="editdescription">{{ __('lang.notes') }}</label>
                                <textarea name="description" id="editdescription" class="form-control" placeholder="{{ __('lang.notes') }}"></textarea>
                                <label id="editdescription-error" class="error" for="editdescription" style="display: none;"></label>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="editpicture">{{ __('lang.document') }}</label>
                                    <input type="file" name="picture" id="editpicture" class="form-control">
                                    <label id="editpicture-error" class="error" for="editpicture" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="editphoto">{{ __('lang.photo') }}</label>
                                    <input type="file" name="photo" id="editphoto" class="form-control" accept="image/*">
                                    <label id="editphoto-error" class="error" for="editphoto" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="pic_name">PIC Name</label>
                                    <input type="text" name="pic_name" id="editpic_name" class="form-control" placeholder="PIC Name" required>
                                    <label id="pic_name-error" class="error" for="pic_name" style="display: none;"></label>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="pic_phone">PIC Phone</label>
                                    <input type="text" name="pic_phone" id="editpic_phone" class="form-control phone" placeholder="PIC Phone" required>
                                    <label id="pic_phone-error" class="error" for="pic_phone" style="display: none;"></label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" name="id" id="editid">
                            <button type="submit" id="saveedit" class="btn btn-primary">{{ __('lang.save') }}</button>
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('lang.close') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end edit data-->

        <!--add checkout -->
        <div id="checkout" class="modal fade" role="dialog">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <form action="#" method="POST" id="formcheckout" autocomplete="off">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('lang.checkout') }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="checkoutassettag">{{ __('lang.assettag') }}</label>
                                    <input type="text" id="checkoutassettag" class="form-control" placeholder="{{ __('lang.assettag') }}" readonly required>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="checkoutname">{{ __('lang.asset') }}</label>
                                    <input type="text" id="checkoutname" class="form-control" placeholder="{{ __('lang.asset') }}" readonly required>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="checkoutemployeeid">{{ __('lang.checkoutto') }}</label>
                                    <select name="employeeid" id="checkoutemployeeid" class="form-select" required>
                                        <option value="">{{ __('lang.employee') }}</option>
                                    </select>
                                    <label id="checkoutemployeeid-error" class="error" for="checkoutemployeeid" style="display: none;"></label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-12 mb-0">
                                    <label for="checkoutdate" class="control-label">{{ __('lang.checkoutdate') }}</label>
                                    <input type="date" name="date" id="checkoutdate" class="form-control setdate" placeholder="{{ __('lang.checkoutdate') }}">
                                    <label id="checkoutdate-error" class="error" for="checkoutdate" style="display: none;"></label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" id="savecheckout" class="btn btn-primary">{{ __('lang.save') }}</button>
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('lang.close') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end checkout-->

        <!--add checkin -->
        <div id="checkin" class="modal fade" role="dialog">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <form action="#" method="POST" id="formcheckin" autocomplete="off">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('lang.checkin') }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="checkinassettag">{{ __('lang.assettag') }}</label>
                                    <input type="text" id="checkinassettag" class="form-control" placeholder="{{ __('lang.assettag') }}" readonly required>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="checkinname">{{ __('lang.asset') }}</label>
                                    <input type="text" id="checkinname" class="form-control" placeholder="{{ __('lang.asset') }}" readonly required>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-12 mb-0">
                                    <label for="checkindate" class="control-label">{{ __('lang.checkindate') }}</label>
                                    <div class="input-group mb-0">
                                        <input type="text" name="date" id="checkindate" class="form-control setdate" placeholder="{{ __('lang.checkindate') }}">
                                        <span id="date" class="input-group-text border-1"><i class="fa fa-calendar"></i></span>
                                    </div>
                                    <label id="checkindate-error" class="error" for="checkindate" style="display: none;"></label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" id="savecheckin" class="btn btn-primary">{{ __('lang.save') }}</button>
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('lang.close') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end checkin-->
    </section>
@endsection

@push('js')
    @include('layouts.datatable_js')
    <script src="{{ asset('plugin/select2/select2.min.js') }}"></script>
@endpush

@push('scripts')
    {{ $dataTable->scripts() }}

    <script>
        $(document).ready(function() {
            $('#filtercompanyid').select2();
            $('#filtercity').select2();
            $('#companyid').select2({
                dropdownParent: $('#add')
            });
            $('#supplierid').select2({
                dropdownParent: $('#add')
            });
            $('#locationid').select2({
                dropdownParent: $('#add')
            });
            $('#category_id').select2({
                dropdownParent: $('#add')
            });
            $('#editcompanyid').select2({
                dropdownParent: $('#edit')
            });
            $('#editsupplierid').select2({
                dropdownParent: $('#edit')
            });
            $('#editlocationid').select2({
                dropdownParent: $('#edit')
            });
            $('#editcategory_id').select2({
                dropdownParent: $('#edit')
            });

            // get all supplier
            $.ajax({
                type: "GET",
                url: "{{ route('suppliers.list') }}",
                dataType: "JSON",
                success: (response) => {
                    var objs = response.data;
                    jQuery.each(objs, function(index, record) {
                        var id = decodeURIComponent(record.id);
                        var name = decodeURIComponent(record.name);
                        $("#supplierid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                        $("#editsupplierid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                    });
                }
            });

            // get all employee
            $.ajax({
                type: "GET",
                url: "{{ route('employees.list') }}",
                dataType: "JSON",
                success: (response) => {
                    var objs = response.data;
                    jQuery.each(objs, function(index, record) {
                        var id = decodeURIComponent(record.id);
                        var name = decodeURIComponent(record.fullname);
                        $("#checkinemployeeid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                        $("#checkoutemployeeid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                    });
                }
            });

            // get all asset type
            $.ajax({
                type: "GET",
                url: "{{ route('asset_types.list') }}",
                dataType: "JSON",
                success: (response) => {
                    var objs = response.data;
                    jQuery.each(objs, function(index, record) {
                        var id = decodeURIComponent(record.id);
                        var name = decodeURIComponent(record.name);
                        $("#typeid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                        $("#edittypeid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                    });
                }
            });

            // get all brand
            $.ajax({
                type: "GET",
                url: "{{ route('brands.list') }}",
                dataType: "JSON",
                success: (response) => {
                    var objs = response.data;
                    jQuery.each(objs, function(index, record) {
                        var id = decodeURIComponent(record.id);
                        var name = decodeURIComponent(record.name);
                        $("#brandid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                        $("#editbrandid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                    });
                }
            });

            // get all location
            $.ajax({
                type: "GET",
                url: "{{ route('locations.list') }}",
                dataType: "JSON",
                success: (response) => {
                    var objs = response.data;
                    jQuery.each(objs, function(index, record) {
                        var id = decodeURIComponent(record.id);
                        var name = decodeURIComponent(record.name);
                        $("#locationid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                        $("#editlocationid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                    });
                }
            });

            // get all company
            $.ajax({
                type: "GET",
                url: "{{ route('companies.list') }}",
                dataType: "JSON",
                success: (response) => {
                    var objs = response.data;
                    jQuery.each(objs, function(index, record) {
                        var id = decodeURIComponent(record.id);
                        var name = decodeURIComponent(record.name);
                        $("#companyid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                        $("#editcompanyid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                        $("#filtercompanyid").append($("<option></option>")
                            .attr("value", id)
                            .text(name));
                    });
                }
            });

            // generate product code
            function generateProductCode() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('assets.generateproductcode') }}",
                    dataType: "JSON",
                    success: function(response) {
                        $("#assettag").val(response.data);
                    }
                });
            }

            // show add data
            $('.btnadd').on('click', function(e) {
                e.preventDefault();
                $('#formadd')[0].reset();
                $('#formadd').removeClass('was-validated');
                $('.is-invalid').removeClass('is-invalid');
                $('.error').html('');
                $('#add').modal('show');
                generateProductCode();
            });

            // add data
            $("#formadd").validate({
                rules: {
                    warranty: {
                        required: false,
                        digits: true,
                        maxlength: 2
                    }
                },
                submitHandler: function(form) {
                    let formData = new FormData($(form)[0]);

                    $.ajax({
                        url: $(form).attr('action'),
                        dataType: 'json',
                        type: $(form).attr('method'),
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response.success) {
                                toastr.success(response.message);
                                $('#add').modal('hide');
                                window.LaravelDataTables['asset-table'].draw();
                            }
                        },
                        error: (response) => {
                            toastr.error(response.responseJSON.message);
                            let error = response.responseJSON.errors;
                            $.each(error, function(key, value) {
                                $(`#${key}`).addClass('is-invalid');
                                $(`#${key}-error`).html(value).fadeIn();
                            });
                        }
                    });
                }
            });

            // show edit data
            $(document).on('click', '.btnedit', function(e) {
                e.preventDefault();
                let id = $(this).data('id');
                $('#formedit').attr('action', `{{ route('assets.show', ':id') }}`.replace(':id', id));
                $('#formedit')[0].reset();
                $('#formedit').removeClass('was-validated');
                $('.is-invalid').removeClass('is-invalid');
                $('.error').html('');
                $('#edit').modal('show');

                $.ajax({
                    url: `{{ route('assets.show', ':id') }}`.replace(':id', id),
                    dataType: "JSON",
                    success: function(response) {
                        let data = response.data;

                        $("#editname").val(data.name);
                        $("#editcompanyid").val(data.companyid).trigger('change');
                        $("#editassettag").val(data.assettag);
                        $("#editsupplierid").val(data.supplierid).trigger('change');
                        $("#editlocationid").val(data.locationid).trigger('change');
                        $("#editcity_name").val(data.city_name);
                        $("#editbrandid").val(data.brandid);
                        $("#editserial").val(data.serial);
                        $("#edittypeid").val(data.typeid);
                        $("#editcategory_id").val(data.category_id).trigger('change');
                        $("#editcertificate_type").val(data.certificate_type);
                        $("#editcost").val(data.cost);
                        $("#editpurchasedate").val(data.purchasedate);
                        $("#editwarranty").val(data.warranty);
                        $("#editstatus").val(data.status);
                        $("#editstatus_perkara").val(data.status_perkara);
                        $("#editpic_name").val(data.pic_name);
                        $("#editpic_phone").val(data.pic_phone);
                        $("#editnpop").val(data.npop);
                        $("#editstatus_asuransi").val(data.status_asuransi);
                        $("#editkoordinat").val(data.koordinat);
                        $("#editpencatatan_aset").val(data.pencatatan_aset);
                        $("#editnomor_induk_bidang").val(data.nomor_induk_bidang);
                        $("#editstatus_pembayaran_pbb").val(data.status_pembayaran_pbb);
                        $("#editdescription").val(data.description);

                        if (data.certificate_type == 'fotocopy') {
                            $('#editdescription').prop('required', true);
                        } else {
                            $('#editdescription').prop('required', false);
                        }
                    }
                });
            });

            // edit data
            $("#formedit").validate({
                rules: {
                    warranty: {
                        required: false,
                        digits: true,
                        maxlength: 2
                    }
                },
                submitHandler: function(form) {
                    let formData = new FormData($(form)[0]);

                    $.ajax({
                        url: $(form).attr('action'),
                        dataType: 'json',
                        type: $(form).attr('method'),
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response.success) {
                                toastr.success(response.message);
                                $('#edit').modal('hide');
                                window.LaravelDataTables['asset-table'].draw();
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: (response) => {
                            toastr.error(response.responseJSON.message);
                            let error = response.responseJSON.errors;
                            $.each(error, function(key, value) {
                                $(`#edit${key}`).addClass('is-invalid');
                                $(`#edit${key}-error`).html(value).fadeIn();
                            });
                        }
                    });
                }
            });

            // delete data
            $(document).on('click', '.btndelete', function(e) {
                e.preventDefault();
                let id = $(this).data('id');

                Swal.fire({
                    title: "{{ __('lang.delete_confirm') }}?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: "{{ __('lang.delete') }}",
                    cancelButtonText: "{{ __('lang.cancel') }}",
                    customClass: {
                        confirmButton: "bg-info"
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        let formData = new FormData();
                        formData.append('_method', 'DELETE');

                        $.ajax({
                            url: `{{ route('assets.destroy', ':id') }}`.replace(':id', id),
                            dataType: 'json',
                            type: 'POST',
                            data: formData,
                            contentType: false,
                            processData: false,
                            success: (response) => {
                                if (response.success) {
                                    toastr.success(response.message);
                                    window.LaravelDataTables['asset-table'].draw();
                                } else {
                                    toastr.error(response.message);
                                }
                            },
                            error: (response) => {
                                toastr.error(response.responseJSON.message);
                            }
                        });
                    }
                });
            });

            // show checkout
            $(document).on('click', '.btncheckout', function(e) {
                let id = $(this).data('id');
                $('#formcheckout').attr('action', `{{ route('assets.checkout', ':id') }}`.replace(':id', id));
                $('#formcheckout')[0].reset();
                $('#formcheckout').removeClass('was-validated');
                $('.is-invalid').removeClass('is-invalid');
                $('.error').html('');
                $('#checkout').modal('show');

                $.ajax({
                    type: "GET",
                    url: `{{ route('assets.show', ':id') }}`.replace(':id', id),
                    dataType: "JSON",
                    success: function(response) {
                        let data = response.data;

                        $("#checkoutassettag").val(data.assettag);
                        $("#checkoutname").val(data.name);
                    }
                });
            });

            // checkout
            $("#formcheckout").validate({
                submitHandler: function(form) {
                    let formData = new FormData($(form)[0]);

                    $.ajax({
                        url: $(form).attr('action'),
                        dataType: 'json',
                        type: $(form).attr('method'),
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response.success) {
                                toastr.success(response.message);
                                $('#checkout').modal('hide');
                                window.LaravelDataTables['asset-table'].draw();
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: (response) => {
                            toastr.error(response.responseJSON.message);
                            let error = response.responseJSON.errors;
                            $.each(error, function(key, value) {
                                $(`#checkout${key}`).addClass('is-invalid');
                                $(`#checkout${key}-error`).html(value).fadeIn();
                            });
                        }
                    });
                }
            });

            // show checkin
            $(document).on('click', '.btncheckin', function(e) {
                let id = $(this).data('id');
                $('#formcheckin').attr('action', `{{ route('assets.checkin', ':id') }}`.replace(':id', id));
                $('#formcheckin')[0].reset();
                $('#formcheckin').removeClass('was-validated');
                $('.is-invalid').removeClass('is-invalid');
                $('.error').html('');
                $('#checkin').modal('show');

                $.ajax({
                    type: "GET",
                    url: `{{ route('assets.show', ':id') }}`.replace(':id', id),
                    dataType: "JSON",
                    success: function(response) {
                        let data = response.data;

                        $("#checkinassettag").val(data.assettag);
                        $("#checkinname").val(data.name);
                    }
                });
            });

            // checkin
            $("#formcheckin").validate({
                submitHandler: function(form) {
                    let formData = new FormData($(form)[0]);

                    $.ajax({
                        url: $(form).attr('action'),
                        dataType: 'json',
                        type: $(form).attr('method'),
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response.success) {
                                toastr.success(response.message);
                                $('#checkin').modal('hide');
                                window.LaravelDataTables['asset-table'].draw();
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: (response) => {
                            toastr.error(response.responseJSON.message);
                            let error = response.responseJSON.errors;
                            $.each(error, function(key, value) {
                                $(`#checkin${key}`).addClass('is-invalid');
                                $(`#checkin${key}-error`).html(value).fadeIn();
                            });
                        }
                    });
                }
            });

            $('#certificate_type, #status').on('change', function() {
                let certificate_type = $('#certificate_type').val();
                let status = $('#status').val();

                if (certificate_type == 'fotocopy' || status == 1) {
                    $('#description').prop('required', true);
                } else {
                    $('#description').prop('required', false);
                }
            });

            $('#editcertificate_type, #editstatus').on('change', function() {
                let certificate_type = $('#editcertificate_type').val();
                let status = $('#editstatus').val();

                if (certificate_type == 'fotocopy' || status == 1) {
                    $('#editdescription').prop('required', true);
                } else {
                    $('#editdescription').prop('required', false);
                }
            });

            $('#filtercompanyid').on('change', function() {
                window.LaravelDataTables['asset-table'].draw();
            });

            $('#filterstatus').on('change', function() {
                window.LaravelDataTables['asset-table'].draw();
            });

            $('#filtercity').on('change', function() {
                window.LaravelDataTables['asset-table'].draw();
            });

            $('.phone').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, '');
            });
        });
    </script>
@endpush