@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('accounting::assets.Assets'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/datetime/bootstrap-datetimepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/pickadate/pickadate.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/plugins/pickers/daterange/daterange.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/filter.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/plugins/input-dropdown/input-dropdown.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/plugins/range/range.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/table/table-custome-styles.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/style-svgFont.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
<style>
    .tooltip{
        z-index: 99999;
    }
    .daterangepicker.dropdown-menu{
        z-index: 99999 !important;
    }
    .select2-dropdown{
        z-index: 99999 !important;
    }
    /*
        Theses values are used here to not impact the rest of the pages
    */
    .filter-section-collapse form .input-group .input-group-addon{
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        height: 100% !important;
    }
</style>
@endsection
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a>@lang('companyuser::sidebar.Accounting')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.Assets')</a></li>
        </ol>
    </div>
</div>
@endsection
@section('content')
@if (checkAddonAvailability(request()->get('tenant_current_subscription')->id, \Modules\Tenant\Enums\SystemAddonEnum::ASSETS_MANAGEMENT))
    <section id="">
        <div class="container-fluid">
            <div class="col-md-8 headTitle">
                <h3 class="py-half">@lang('accounting::assets.Assets')</h3>
            </div>
            <div class="headBtns fixed-btns" style="padding-bottom: 10px;">
                <div class="btn-group pull-right">
                    @can('accounting.assets.create')
                        <a type="button" data-toggle="dropdown" aria-haspopup="true" class="bg-transparent"
                            style="font-size: inherit; border:none;" aria-expanded="false" title="{{ __('Add')}}">
                            <span class="icon-Add action-icon"></span>
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item text-center" href="{{ route('company.assets.create',['type' => 'new', 'subdomain' => $subdomain]) }}">@lang('accounting::assets.new_asset')</a>
                            <a class="dropdown-item text-center" href="{{ route('company.assets.create',['type' => 'old', 'subdomain' => $subdomain]) }}">@lang('accounting::assets.old_asset')</a>
                        </div>
                    @endcan
                </div>
            </div>
            @include('companyuser::errors.all')
            @include('companyuser::errors.lists')
            <div class="mt-1">
                <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <div class="d-flex justify-content-between">
                        <span>@lang('Filter') </span><i class="fa fa-angle-down"></i>
                    </div>
                </button>
            </div>
            <div class="collapse filter-section-collapse" id="collapseExample">
                <form action="{{ route('company.assets.index', ['subdomain' => $subdomain]) }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
                <div class="card card-body mb-0">
                    <div class="row mt-1">
                        <div class="col-lg-6 col-md-6">
                            <div class="row py-1">
                                <div class="col-lg-12">
                                    <label for="main_account">@lang('accounting::assets.Main Account')</label>
                                </div>
                                <div class="col-lg-12">
                                    <select name="main_account" class="w-100 py-1 form-control select2-tag" style="width:100%">
                                        <option value="">{{ __('All') }}</option>
                                        @foreach($main_accounts as $key => $value)
                                            <option value="{{ $key }}" {{ request('main_account') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="row py-1">
                                <div class="col-lg-12">
                                    <label for="type">@lang('accounting::assets.Asset Type')</label>
                                </div>
                                <div class="col-lg-12">
                                    <select name="type" class="w-100 py-1 form-control select2-tag" style="width:100%">
                                        <option value="">{{ __('All') }}</option>
                                        @foreach($asset_types as $key => $value)
                                            <option value="{{ $key }}" {{ request('type') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="row py-1">
                                <div class="col-lg-12">
                                    <label for="category">@lang('accounting::assets.Cost Center')</label>
                                </div>
                                <div class="col-lg-12">
                                    <select name="cost_center_id" id="cost_center_id" class="w-100 py-1 form-control select2-tag h-45" style="width:100%">
                                        @can('cost-center.main-center.view')
                                        <option value="">{{__('All')}}</option>
                                        <option @if(request('cost_center_id')=='main_center' ) selected @endif value="main_center">{{__('products::cost_center.main center')}}</option>
                                        @endcan
                                        @foreach($cost_centers as $costCenter)
                                            @if($costCenter->parent_id)
                                            <option @if(request('cost_center_id')==$costCenter->id) selected @endif value="{{$costCenter->id}}">{{$costCenter->code}}
                                                {{ app()->getLocale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en }}
                                            </option>
                                            @else
                                            <option @if(request('cost_center_id')==$costCenter->id) selected @endif value="{{$costCenter->id}}">{{$costCenter->code}} -
                                                {{ app()->getLocale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en }}
                                            </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row"></div>
                    <div class="text-left mt-2">
                        <button type="submit" class="btn btn-info mr-1 mb-1 p-5">
                            <img src="{{asset('assets/images/Done.png') }}" alt="done" width="35px">
                        </button>
                        <button type="reset" id="reset" class="btn btn-warning mb-1 p-5">
                            <span class="icon-Delete f-32"></span>
                        </button>
                    </div>
                </div>
                </form>
            </div>
            <section class="mt-1" id="configuration">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="card-body">
                                <div id="div-collection" class=" content-row menuDisplayed sub-header-descr">
                                    <table class="table table-striped table-column dataex-res-configuration  prevent-init-sort @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                                        <thead>
                                            <tr>
                                                <th>@lang('accounting::assets.Id')</th>
                                                <th>@lang('accounting::assets.Name')</th>
                                                <th style="width: 15%">@lang('accounting::assets.Main Account')</th>
                                                <th>@lang('accounting::assets.Asset Type')</th>
                                                <th>@lang('accounting::assets.Cost Center')</th>
                                                <th>@lang('accounting::assets.Asset Cost')</th>
                                                <th>@lang('accounting::assets.Asset Date')</th>
                                                <th>@lang('accounting::assets.Total Depreciation')</th>
                                                <th>@lang('accounting::assets.Total Capitalization')</th>
                                                <th>@lang('accounting::assets.Current Value')</th>
                                                <th>@lang('Actions')</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($assets as $asset)
                                            <tr>
                                                <td>{{ $asset->id }}</td>
                                                <td>{{ $asset->name}}</td>
                                                <td>
                                                    <a href="{{route('company.chart-of-accounts.show', ['subdomain' => $subdomain, 'account' => $asset->mainAccount->id])}}">
                                                        {{ $asset->mainAccount->name }}
                                                    </a>
                                                </td>
                                                <td>{{ $asset->type == \Modules\Accounting\Enums\AssetTypesEnum::OLD ? __('accounting::assets.old') : __('accounting::assets.new') }}</td>
                                                <td>{{ $asset->costCenter ? (app()->getLocale() == 'ar' ? $asset->costCenter->name_ar : $asset->costCenter->name_en) : __('products::cost_center.main center') }}</td>
                                                <td>{{ number_format( $asset->buying_cost  ,2,".",",")}}</td>
                                                <td>{{ $asset->formatDate($asset->buying_date)}}</td>
                                                <td>{{ number_format($asset->total_depreciation,2,".",",")}}</td>
                                                <td>{{ number_format($asset->total_capitalization,2,".",",")}}</td>
                                                <td>{{ number_format($asset->current_value  ,2,".",",")}}</td>
                                                <td class="text-center">
                                                    @can('accounting.assets.view')
                                                        <a href="{{route('company.assets.show', ['subdomain' => $subdomain, 'asset' => $asset->id])}}" class='btn btni rounded-circle font-small-2 btn-primary btn-xs text-white' data-toggle="tooltip" data-placement="bottom" title="@lang('Show')"><i class="fa fa-eye"></i></a>
                                                    @endcan
                                                    @if($asset->depreciation_method !== Modules\Accounting\Enums\DepreciationMethodsEnum::DEPOFF && $asset->sold == null)
                                                        @can('accounting.assets.create', 'accounting.assets.edit')
                                                            <a data-url="" class='btn btni rounded-circle font-small-2 btn-warning btn-xs text-white' data-toggle="modal" data-target="" onclick="showDepreciationPopup(this, '{{$asset->name}}', '{{route('company.assets.depreciation.index', ['subdomain' => $subdomain, 'asset' => $asset->id])}}')" data-toggle="tooltip" data-placement="bottom" title="@lang('accounting::assets.Depreciate the asset')"><i class="fa fa-level-down"></i></a>
                                                        @endcan
                                                    @endif
                                                    @if($asset->sold == null)
                                                        @can('accounting.assets.create', 'accounting.assets.edit')
                                                            <a data-url="" class='btn btni rounded-circle font-small-2 btn-warning btn-xs text-white' data-toggle="modal" data-target="" onclick="showCapitalizationPopup(this, '{{$asset->name}}', '{{route('company.assets.capitalization.index', ['subdomain' => $subdomain, 'asset' => $asset->id])}}')" data-toggle="tooltip" data-placement="bottom" title="@lang('accounting::assets.Capitalize the asset')"><i class="fa fa-level-up"></i></a>
                                                        @endcan
                                                    @endif
                                                    @if($asset->sold == null)
                                                    @can('accounting.assets.edit')
                                                        <a href="{{route('company.assets.edit', ['subdomain' => $subdomain, 'asset' => $asset->id])}}" class='btn btni rounded-circle font-small-2 btn-info btn-xs btn-edit text-white' data-toggle="tooltip" data-placement="bottom" title="@lang('Edit')"><i class="fa fa-pencil"></i></a>
                                                    @endcan
                                                    @endif
                                                    @if($asset->sold == null)
                                                        @can('accounting.assets.create', 'accounting.assets.edit')
                                                            <a data-url="" class='btn btni rounded-circle font-small-2 btn-warning btn-xs text-white' data-toggle="modal" data-target="" onclick="showSellPopup(this, '{{$asset->name}}', '{{route('company.assets.sell.index', ['subdomain' => $subdomain, 'asset' => $asset->id])}}')" data-toggle="tooltip" data-placement="bottom" title="@lang('accounting::assets.Selling the asset')"><i class="fa fa-shopping-cart"></i></a>
                                                        @endcan
                                                    @endif
                                                    @can('accounting.assets.delete')
                                                        <a data-url="" onclick="deleteTheAsset(this, '{{route('company.assets.destroy', [$subdomain,$asset->id])}}', '{{route('company.assets.destroyTransactions', [$subdomain,$asset->id])}}')" class='btn btni rounded-circle font-small-2 btn-danger btn-xs btn-delete delete-item text-white' data-toggle="modal" data-target="" data-toggle="tooltip" data-placement="bottom" title="@lang('accounting::assets.Delete the asset')"><i class="fa fa-trash"></i></a>
                                                    @endcan
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    {{-- delete modal --}}
                                    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="deleteModalLabel">@lang('Delete')</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>
                                                        @lang('accounting::assets.Delete Confirmation')
                                                    </p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                    <span class="@if(app()->getlocale() == 'ar') pull-right @else pull-left @endif mx-1">
                                                        <form action="" method="POST" class="form" id="deleteAssetWithTrans">
                                                            @csrf
                                                            @method('delete')
                                                            <button type="submit" class="btn btn-primary">@lang('accounting::assets.Delete the asset with Transactions')</button>
                                                        </form>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- depreciation modal --}}
                                    <div class="modal fade" id="depreciationModal" tabindex="-1" role="dialog" aria-labelledby="depreciationModalLabel" style="top:20%">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content filter-section-collapse">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="depreciationModalLabel">@lang('accounting::assets.Add Depreciation')</h4>
                                                </div>
                                                <div style="margin: 13px;margin-bottom: 0px;display: none;" role="alert" id="depreciation_added_msg" class="alert alert-success"></div>
                                                <div style="margin: 13px;margin-bottom: 0px;" class="alert alert-danger hidden depreciation_error">
                                                    <div class="error-header">
                                                        {{-- <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> --}}
                                                        <ul id="depreciation_error">
                                                        </ul>
                                                    </div>
                                                </div>
                                                <form action="{{ route('company.assets.depreciation.store', ['subdomain' => $subdomain]) }}" method="POST" id="depreciationForm">
                                                    @csrf
                                                <div class="modal-body">
                                                    <div class="container">
                                                        <div class="row align-items-center">
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="Name" class="form-label">{{ __('accounting::assets.Name') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <p id="asset_name"></p>
                                                                        <input type="hidden" name="asset_id" id="asset_id">
                                                                        <input type="hidden" name="depreciation_account" id="depreciation_account">
                                                                        <input type="hidden" name="main_depreciation_account" id="main_depreciation_account">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="current_value" class="form-label">{{ __('accounting::assets.Current Value') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <p id="currentValue"></p>
                                                                        <input type="hidden" name="current_value" id="current_value">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="depreciation_date" class="form-label">{{ __('accounting::assets.Depreciation Date') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <div class='input-group'>
                                                                            <x-date-picker
                                                                                mode="single"
                                                                                name="depreciation_date"
                                                                                input-id="depreciation_date"
                                                                                input-class="h-45"
                                                                                :placeholder="__('accounting::assets.Depreciation Date')"
                                                                                :defaultToday="true"
                                                                                :max-date="Date::now('date')"
                                                                            />
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="depreciation_amount" class="form-label">{{ __('accounting::assets.Depreciation Amount') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <input type="number" name="depreciation_amount" id="depreciation_amount" class="number w-100 form-control" value="0.00">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="cost_account" class="form-label">{{ __('accounting::assets.Cost Account') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <select name="cost_account" id="cost_account" class="w-100 form-control selection cost_account" style="width: 100%;"></select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                    <span class="pull-right">
                                                        <button type="button" onclick="createAssetAction('depreciation')" class="btn btn-primary" id="add-depreciation-btn">@lang('Save')</button>
                                                    </span>
                                                </div>
                                            </form>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- Capitalization modal --}}
                                    <div class="modal fade" id="capitalizationModal" tabindex="-1" role="dialog" aria-labelledby="capitalizationModalLabel" style="top:3%">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content filter-section-collapse">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="capitalizationModalLabel">@lang('accounting::assets.Add Capitalization')</h4>
                                                </div>
                                                <div style="margin: 13px;margin-bottom: 0px;display: none;" role="alert" id="capitalization_added_msg" class="alert alert-success"></div>
                                                <div style="margin: 13px;margin-bottom: 0px;" class="alert alert-danger hidden capitalization_error">
                                                    <div class="error-header">
                                                        <ul id="capitalization_error">
                                                        </ul>
                                                    </div>
                                                </div>
                                                <form action="{{ route('company.assets.capitalization.store', ['subdomain' => $subdomain]) }}" method="POST" id="capitalizationForm">
                                                    @csrf
                                                    <div class="modal-body">
                                                        <div class="container">
                                                            <div class="row align-items-center">
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-5">
                                                                            <label for="Name" class="form-label">{{ __('accounting::assets.Name') }}</label>
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <p id="casset_name"></p>
                                                                            <input type="hidden" name="asset_id" id="casset_id">
                                                                            <input type="hidden" name="asset_account" id="asset_account">
                                                                            <input type="hidden" name="main_account" id="main_account">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-5">
                                                                            <label for="current_value" class="form-label">{{ __('accounting::assets.Current Value') }}</label>
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <p id="ccurrentValue"></p>
                                                                            <input type="hidden" name="current_value" id="ccurrent_value">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-5">
                                                                            <label for="capitalization_date" class="form-label">{{ __('accounting::assets.Capitalization Date') }}</label>
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <div class='input-group'>
                                                                            <x-date-picker
                                                                                mode="single"
                                                                                name="capitalization_date"
                                                                                input-id="capitalization_date"
                                                                                input-class="h-45"
                                                                                :placeholder="__('accounting::assets.Capitalization Date')"
                                                                                :defaultToday="true"
                                                                                :max-date="Date::now('date')"
                                                                            />
                                                                        </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-5">
                                                                            <label for="capitalization_amount" class="form-label">{{ __('accounting::assets.Capitalization Amount') }}</label>
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <input type="number" name="capitalization_amount" value="0.00" class="number w-100 form-control sell_amount">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-5 justify-content-between align-items-center">
                                                                            <label for="tax_id" class="form-label">{{ __('accounting::assets.vat_option') }}</label>
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <tax-dropdown-component 
                                                                                :selected="` `"
                                                                                :lang="'{{ app()->getLocale() }}'"
                                                                                :multi-select="false"
                                                                                input-name="tax_id"
                                                                                input-id="capitalization-vat-selector"
                                                                                :api-filters="{ type_id: {{ \Modules\Settings\Enums\VatTypesEnum::PURCHASES }} }"
                                                                                :show-no-default-tax="true"
                                                                                :no-default-tax-label="'{{ __('No Default Tax Rate') }}'"
                                                                                :translations="{
                                                                                    placeholder: '{{ __('settings::tax.select_tax') }}',
                                                                                    searchPlaceholder: '{{ __('settings::tax.search_taxes') }}',
                                                                                    noResultsText: '{{ __('settings::tax.no_taxes_found') }}',
                                                                                    loadMoreHint: '{{ __('settings::tax.load_more_hint') }}',
                                                                                }"
                                                                                class="w-100"
                                                                                @change="handleCapitalizationVatChange($event)"
                                                                            />
                                                                            @error('tax_id')
                                                                            <span class="invalid-feedback text text-danger" role="alert">
                                                                                <p>{{ $message }}</p>
                                                                            </span>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <input name="vat_amount" type="hidden" class="vat-amount-input" value="0.00">
                                                                <div class="form-group">
                                                                    <div class="row" style="display: flex;justify-content: center;align-items: center">
                                                                        <div class="col-md-5">
                                                                            <label for="total_amount" class="form-label">{{ __('accounting::assets.total_amount') }}</label>
                                                                        </div>
                                                                        <div id="total_amount" class="col-md-7">
                                                                            <span class="final-price">0.00</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-5 justify-content-between align-items-center">
                                                                            <label for="cash_account" class="form-label">{{ __('accounting::assets.Cash Account') }}</label>
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <select name="cash_account" id="cash_account" class="w-100 form-control selection cash_account" style="width: 100%;"></select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-5 justify-content-between align-items-center">
                                                                            <label for="supplier_id">@lang('accounting::assets.Supplier')</label>
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <suppliers-dropdown-component
                                                                                :selected="assetCapitalizationSelectedSupplier"
                                                                                :disable-inactive="true"
                                                                                :input-id="'supplier_id'"
                                                                                :create-new="true"
                                                                                :create-new-url="'{{ route('company.suppliers.create', ['subdomain' => $subdomain]) }}'"
                                                                                :lang="'{{ app()->getLocale() }}'"
                                                                                :multi-select="false"
                                                                                :input-name="'supplier_id'"
                                                                                :display-key="'name'"
                                                                                :translations="{
                                                                                    placeholder: '{{ __('purchases::supplier_receipts.select supplier') }}',
                                                                                    searchPlaceholder: '{{ __('purchases::suppliers.search_suppliers') }}',
                                                                                    noResultsText: '{{ __('purchases::suppliers.no_suppliers_found') }}',
                                                                                    createNewText: '{{ __('purchases::suppliers.add_new_supplier') }}'
                                                                                }"
                                                                            />
                                                                            @error('supplier_id')
                                                                            <span class="invalid-feedback text text-danger" role="alert">
                                                                                <p>{{ $message }}</p>
                                                                            </span>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                        <span class="pull-right">
                                                            <button type="button" onclick="createAssetAction('capitalization')" class="btn btn-primary" id="add-capitalization-btn">@lang('Save')</button>
                                                        </span>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- Sell modal --}}
                                    <div class="modal fade" id="sellModal" tabindex="-1" role="dialog" aria-labelledby="sellModalLabel" style="top:10%">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content filter-section-collapse">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="sellModalLabel">@lang('accounting::assets.Sell the asset')</h4>
                                                </div>
                                                <div style="margin: 13px;margin-bottom: 0px;display: none;" role="alert" id="sell_added_msg" class="alert alert-success"></div>
                                                <div style="margin: 13px;margin-bottom: 0px;" class="alert alert-danger hidden sell_error">
                                                    <div class="error-header">
                                                        <ul id="sell_error">
                                                        </ul>
                                                    </div>
                                                </div>
                                                <form action="{{ route('company.assets.sell.store', ['subdomain' => $subdomain]) }}" method="POST" id="sellForm">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="container">
                                                        <div class="row align-items-center">
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="Name">{{ __('accounting::assets.Name') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <p id="sellAsset_name"></p>
                                                                        <input type="hidden" name="asset_id" id="sellAsset_id">
                                                                        <input type="hidden" name="asset_account" id="SellAsset_account">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="current_value">{{ __('accounting::assets.Current Value') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <p id="sellcurrentValue"></p>
                                                                        <input type="hidden" name="current_value" id="sellcurrent_value">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="selling_date">{{ __('accounting::assets.Selling Date') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <div class='input-group'>
                                                                            <x-date-picker
                                                                                mode="single"
                                                                                name="selling_date"
                                                                                input-id="selling_date"
                                                                                input-class="h-45"
                                                                                :placeholder="__('accounting::assets.Selling Date')"
                                                                                :defaultToday="true"
                                                                                :max-date="Date::now('date')"
                                                                            />
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="selling_value">{{ __('accounting::assets.Selling Amount') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <input type="number" id="selling_value" name="selling_value" value="0.00" class="number w-100 form-control">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                    <label for="sell_vat_option">{{ __('accounting::assets.vat_option') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <tax-dropdown-component 
                                                                            :selected="` `"
                                                                            :lang="'{{ app()->getLocale() }}'"
                                                                            :multi-select="false"
                                                                            input-name="tax_id"
                                                                            input-id="sell-vat-selector"
                                                                            :api-filters="{ type_id: {{ \Modules\Settings\Enums\VatTypesEnum::SALES }} }"
                                                                            :show-no-default-tax="true"
                                                                            :no-default-tax-label="'{{ __('No Default Tax Rate') }}'"
                                                                            :translations="{
                                                                                placeholder: '{{ __('settings::tax.select_tax') }}',
                                                                                searchPlaceholder: '{{ __('settings::tax.search_taxes') }}',
                                                                                noResultsText: '{{ __('settings::tax.no_taxes_found') }}',
                                                                                loadMoreHint: '{{ __('settings::tax.load_more_hint') }}',
                                                                            }"
                                                                            class="w-100"
                                                                            @change="handleSellVatChange($event)"
                                                                        />
                                                                        @error('sell_vat_option')
                                                                        <span class="invalid-feedback text text-danger" role="alert">
                                                                            <p>{{ $message }}</p>
                                                                        </span>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <input name="vat_amount" type="hidden" id="sell-vat-amount" value="0.00">
                                                            <div class="form-group">
                                                                <div class="row" style="display: flex;justify-content: center;align-items: center">
                                                                    <div class="col-md-5">
                                                                        <label for="total_amount">{{ __('accounting::assets.total_amount') }}</label>
                                                                    </div>
                                                                    <div id="total_amount" class="col-md-7">
                                                                        <span id="sell-final-price">0.00</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <label for="selling_account">{{ __('accounting::assets.Cash Account') }}</label>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <select name="selling_account" id="sellCash_account" class="w-100 form-control selection" style="width: 100%;"></select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                    <span class="pull-right">
                                                        <button type="button" onclick="createAssetAction('sell')" class="btn btn-primary" id="add-sell-btn">@lang('Save')</button>
                                                    </span>
                                                </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </section>
@else
    <div class="col-md-12" style="padding: 8px;margin-bottom:15px">
        @include('companyuser::components.addon-not-available', ['addon' => __('companyuser::addons.assets_management')])
    </div>
@endif
@endsection
@section('extra_scripts')
    <script>
        gtag('event', 'web_accounting_assets_management_list');
        console.log('web_accounting_assets_management_list event');
    </script>
    <script src="{{url('assets/js/vendors/js/forms/icheck/icheck.min.js')}}" type="text/javascript" defer></script>
    <script src="{{url('assets/js/scripts/forms/checkbox-radio.js')}}" type="text/javascript" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/bootstrap-datetimepicker.min.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.date.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.time.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/legacy.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/daterange/daterangepicker.js')}}" defer></script>
    <script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/picker-date-time.js')}}" defer></script>

    <script>
        /*
            Remove datatable cache from the local storage
            This is a unique case, it seems like when using datatables at the frontend only (without ajax)
            It caches the current page number and search query ..etc
            So when navigating back to the page, it still shows the same data
            unless the cache is removed
        */
        localStorage.removeItem('DataTables_DataTables_Table_0_/ar/accounting/assets');

        window.addEventListener('DOMContentLoaded', function() {
            $(document).ready(function() {
                $('#reset').click(function(e) {
                    e.preventDefault();
                    $('.form-control').prop('selectedIndex', 0);
                    $('.select2-tag').select2({
                        tags: false,
                            allowClear: true,
                            language: {
                            noResults: function () {
                                return "{{ __('No result found')}}";
                            }
                        },
                    }).on('change', function() {
                        $('.select2-selection__clear').text("");
                    });
                    $('.select2-selection__clear').text("");

                });

                $("#cash_account").select2({
                    tags: false,
                    language: {
                        noResults: function() {
                            return "{{ __('No result found')}}";
                        }
                    },
                    escapeMarkup: function(markup) {
                        return markup;
                    },
                    dropdownParent: $("#capitalizationModal")
                });

                $('#supplier_id').on("change", function (e) {
                    if($('#supplier_id').find(':selected').val() == 'ADD_NEW'){
                        // Redirecto to the creation page
                        window.location.href = "{{ route('company.suppliers.create', $subdomain) }}";
                        // Reset the select box to avoid UX issues                                                              
                        $('#supplier_id').val(null).trigger('change');
                    }
                });

                // Capitalization VAT Calculator variable
                let selectedCapitalizationTax = null; // Store the selected capitalization tax object
                
                // Listen for capitalization VAT change from Vue component
                window.addEventListener('capitalization-vat-changed', function(e) {
                    selectedCapitalizationTax = e.detail; // Store the tax object from event
                    calculateFinalPrice();
                });

                $("#cash_account").on("change", function (e) {
                    if($('#cash_account').find(':selected').val() == 'ADD_NEW'){
                        window.location.href = "{{ route('company.chart-of-accounts.create', $subdomain) }}";
                        $('#cash_account').val(null).trigger('change');
                    }
                });
                $("#cost_account").select2({
                    tags: false,
                    language: {
                        noResults: function() {
                            return "{{ __('No result found')}}";
                        }
                    },
                    dropdownParent: $("#depreciationModal")
                });
                $("#sellCash_account").select2({
                    tags: false,
                    language: {
                        noResults: function() {
                            return "{{ __('No result found')}}";
                        }
                    },
                    dropdownParent: $("#sellModal")
                });

                // Sell VAT Calculator
                let selectedSellTax = null; // Store the selected sell tax object
                $('#selling_value').on('input', calculateSellFinalPrice);
                // Listen for sell VAT change from Vue component
                window.addEventListener('sell-vat-changed', function(e) {
                    selectedSellTax = e.detail; // Store the tax object from event
                    calculateSellFinalPrice();
                });
                function calculateSellFinalPrice(){
                    const netPrice = parseFloat($('#selling_value').val()) || 0;
                    
                    // Get percentage from stored tax object
                    const vatPercentage = selectedSellTax?.percentage || 0;
                    
                    if (!vatPercentage) {
                        $('#sell-final-price').text(netPrice ? netPrice.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0] : 0.00);
                        $('#sell-vat-amount').val(0.00);
                        return;
                    }
                    
                    const vatAmount = netPrice * (vatPercentage / 100);
                    $('#sell-vat-amount').val(vatAmount.toFixed(2));
                    const finalPrice = netPrice + vatAmount;
                    $('#sell-final-price').text(finalPrice ? finalPrice.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0] : 0.00);
                }


                // Capitalization VAT Calculator
                function calculateFinalPrice() {
                    const netPrice = parseFloat($('.sell_amount').val()) || 0;
                    
                    // Get percentage from stored tax object
                    const vatPercentage = selectedCapitalizationTax?.percentage || 0;
                    
                    if (!vatPercentage) {
                        $('.final-price').text(netPrice ? netPrice.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0] : 0.00);
                        $('.vat-amount-input').val(0.00);
                        return;
                    }
                    
                    const vatAmount = netPrice * (vatPercentage / 100);
                    $('.vat-amount-input').val(vatAmount.toFixed(2));
                    const finalPrice = netPrice + vatAmount;
                    $('.final-price').text(finalPrice ? finalPrice.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0] : 0.00);
                }

                $('.sell_amount').on('input', calculateFinalPrice);
            });
        });

        function deleteTheAsset(btn, url1, url2) {
            // $(btn).attr('disabled', true);
            $('#deleteAssetOnly').attr('action', url1);
            $('#deleteAssetWithTrans').attr('action', url2);
            $('#deleteModal').modal('show');
        }

        function showDepreciationPopup(btn, assetName, url) {
            $(btn).attr('disabled', true);
            $('.depreciation_error').addClass('hidden');
            $("#cost_account").empty();
            $("#depreciation_amount").val(0.00);
            clearDate('depreciation_date');
            $.ajax({
                url: url,
                type: 'GET',
                dataType: "json",
                success: function(response) {
                    let result = response.data.assets;
                    let costAccounts = response.data.costAccounts;
                    let selectCostAccount = document.getElementById('cost_account');
                    $('#asset_name').text(assetName);
                    $('#asset_id').val(result.id);
                    $('#depreciation_account').val(result.depreciation_id);
                    $('#main_depreciation_account').val(result.depreciation_account);

                    $('#current_value').val(result.current_value);
                    $('#currentValue').text(result.current_value);
                    for (accountId in costAccounts) {
                        var opt = document.createElement("option");
                        opt.value = accountId;
                        opt.innerHTML = costAccounts[accountId];
                        selectCostAccount.appendChild(opt);
                    }
                    $('#depreciationModal').modal('show');
                },
                error: function(xhr, status, error) {

                },
                complete: function(data) {
                    $(btn).attr('disabled', false);
                }
            });

        }

        function showCapitalizationPopup(btn, assetName, url) {
            $(btn).attr('disabled', true);
            $('.capitalization_error').addClass('hidden');
            $("#cash_account").empty();
            $("#capitalization_amount").val(0.00);
            clearDate('capitalization_date');
            $.ajax({
                url: url,
                type: 'GET',
                dataType: "json",
                success: function(response) {
                    let result = response.data.assets;
                    let cashAccounts = response.data.cashAccounts;
                    let supplier = response.data.supplier;
                    let selectCashAccount = document.getElementById('cash_account');
                    $('#casset_name').text(assetName);
                    $('#casset_id').val(result.id);
                    $('#asset_account').val(result.account_id);
                    $('#main_account').val(result.main_account);
                    $('#ccurrent_value').val(result.current_value);
                    $('#ccurrentValue').text(result.current_value);
                    // Dispacth event to the vue app to handle the reactive state of the supplier
                    document.dispatchEvent(new CustomEvent('supplierChanged', { detail: supplier }));
                    for (accountId in cashAccounts) {
                        var opt = document.createElement("option");
                        opt.value = accountId;
                        opt.innerHTML = cashAccounts[accountId];
                        selectCashAccount.appendChild(opt);
                    }
                    $('#capitalizationModal').modal('show');
                },
                error: function(xhr, status, error) {

                },
                complete: function(data) {
                    $(btn).attr('disabled', false);
                }
            });

        }

        function showSellPopup(btn, assetName, url) {
            $(btn).attr('disabled', true);
            $('.sell_error').addClass('hidden');
            $("#sellCash_account").empty();
            $(".sell_amount").val(0.00);
            clearDate('selling_date');
            $.ajax({
                url: url,
                type: 'GET',
                dataType: "json",
                success: function(response) {
                    let result = response.data.assets;
                    let cashAccounts = response.data.cashAccounts;
                    let selectCashAccount = document.getElementById('sellCash_account');
                    if( result.depreciation_id && ! result.is_depreciated){
                        $('.sell_error').removeClass('hidden');
                        // We are clearing the previous errors to avoid duplications in the UI
                        $('#sell_error').html('').append("<li>@lang("accounting::assets.not_depreciated_before_error")</li>")
                    }
                    $('#sellAsset_name').text(assetName);
                    $('#sellAsset_id').val(result.id);
                    $('#SellAsset_account').val(result.account_id);
                    $('#sellcurrent_value').val(parseFloat(result.current_value) );
                    $('#sellcurrentValue').text(parseFloat(result.current_value) );
                    for (accountId in cashAccounts) {
                        var opt = document.createElement("option");
                        opt.value = accountId;
                        opt.innerHTML = cashAccounts[accountId];
                        selectCashAccount.appendChild(opt);
                    }
                    $('#sellModal').modal('show');
                },
                error: function(xhr, status, error) {

                },
                complete: function(data) {
                    $(btn).attr('disabled', false);
                }
            });

        }

        function createAssetAction(actionName) {
            $('#add-' + actionName + '-btn').attr('disabled', true);
            $('.' + actionName + '_error').addClass('hidden');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            let data = $('#' + actionName + 'Form').serialize();
            
            // Parse the serialized data and check if tax_id is empty or an empty string and set it to 0
            const params = new URLSearchParams(data);
            const taxId = params.get('tax_id');
            if (!taxId || taxId.trim() === '') {
                params.set('tax_id', '0');
                data = params.toString();
            }
            
            $.ajax({
                url: $('#' + actionName + 'Form').attr('action'),
                type: 'POST',
                data: data,
                dataType: "json",
                success: function(response) {
                    // TODO: Make the following part more dynamic and avoid using conditions
                    if(actionName == 'capitalization'){
                        $('#' + actionName + '_added_msg').text('{{__('accounting::assets.capitalization_added_msg')}}');
                    }else{
                        $('#' + actionName + '_added_msg').text('{{__('Item created successfully')}}');
                    }
                    $('#' + actionName + '_added_msg').show().delay(5000).slideUp('slow');
                    $('#' + actionName + '_amount').val(0.00);
                    location.reload();
                },
                error: function(xhr, status, error) {
                    displayErrors(xhr, actionName + '_error');
                },
                complete: function(data) {
                    $('#add-' + actionName + '-btn').attr('disabled', false);
                }
            });
        }

        function displayErrors(xhr, errorClass) {
            if ("errors" in xhr.responseJSON) {
                $('.' + errorClass).removeClass('hidden');
                $('#' + errorClass).empty();
                $.each(xhr.responseJSON.errors, function(key, value) {
                    $('#' + errorClass).append('<li>' + value + '</li>')
                });
            } else {
                $('.' + errorClass).removeClass('hidden');
            }
        }

        function clearDate(input) {
            var now = new Date();

            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);

            var today = now.getFullYear() + "-" + month + "-" + day;

            $('#' + input).val(today);
        }
    </script>
@endsection