@extends('admin.layout.master')
@section('content')
    <style>
        .myTable {
            width: 100%;
            text-align: center;
            background-color: lemonchiffon;
            border-collapse: collapse;
        }

        .myTable th {
            background-color: red;
            color: white;
        }

        .myTable td,
        .myTable th {
            padding: 10px;
            border: 1px solid green;
        }

        .ui-autocomplete {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            list-style: none;
            font-size: 14px;
            text-align: left;
            background-color: #ffffff;
            border: 1px solid #cccccc;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            background-clip: padding-box;
        }

        .ui-autocomplete>li>div {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333333;
            white-space: nowrap;
        }

        .ui-state-hover,
        .ui-state-active,
        .ui-state-focus {
            text-decoration: none;
            color: #262626;
            background-color: #f5f5f5;
            cursor: pointer;
        }

        .custom-card {
            background-color: #318777;
            color: white;
            /* #17A2B8; */
        }

        .ui-helper-hidden-accessible {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .blink {
            animation: blinker 4s linear infinite;
            color: yellow;
            font-size: 20px;
            font-weight: bold;
            font-family: sans-serif;
        }

        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }
        .customSpan {
            color: yellow;
            font-size: 12px;
            font-weight: bold;
            font-family: sans-serif;
            animation: blinker 2s linear infinite;
        }

    </style>
    <div class="row">
        <div class="col-xs-12">
            <h4 class="page-title"> </h4>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card custom-card">
                <div class="card-header text-center"><b class="blink"><u>FIXED ASSET ITEM</u></b></div>
                <form action="#" id="form_Id" method="POST">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-3">
                                        <label> Install From</label>
                                         <div class="row">
                                            <div class="col-9">
                                                <input type="text" class="form-control" id="installForm" name="install_form"/>
                                                <input type="hidden" class="form-control" value="0" id="referenceId" name="reference_id"/>
                                            </div>
                                            <div class="col-3" style="margin: 0; padding:0;">
                                                <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal">
                                                    <i class="fas fa-download"></i>
                                                </button>
                                            </div>
                                         </div>
                                    </div>
                                    <div class="col-3">
                                        <label>GRN NO</label>
                                        <input type="text" name="grn_no" class="form-control input-sm" id="grn_No" />
                                    </div>
                                    <div class="col-3">
                                        <label>Date</label>
                                        <input type="date" name="date" class="form-control input-sm" id="date_of_Grn" />
                                    </div>
                                    <div class="col-3">
                                        <label>Asset (Acquired date):</label>
                                        <input type="date" name="acuired_date" class="form-control input-sm"
                                            id="asset_acuired_Date" />
                                    </div>

                                    <div class="col-3">
                                        <label>Insurance Date:</label>
                                        <input type="date" name="insurance_date" class="form-control input-sm"
                                            id="insurance_Date" />
                                    </div>
                                    <div class="col-3">
                                        <label>Purchase Requisition No:</label>
                                        <input type="text" name="purchase_requisition_no" class="form-control input-sm"
                                            id="purchase_requisition_No" />
                                    </div>
                                    <div class="col-3">
                                        <label>Purchase Order No:</label>
                                        <input type="text" name="purchase_order_no" class="form-control input-sm"
                                            id="purchase_order_No" />
                                    </div>
                                    <div class="col-3">
                                        <label>Vendor: <span class="customSpan">Required</span></label>
                                        <select name="vendor_id" onchange="vendorInfo(this.value)" required
                                            style="width:100%" class="form-control SpecialSelect" id="vendorId">
                                            <option value="">Choose One</option>
                                            @foreach ($vendor as $item)
                                                <option value="{{ $item->id }}">{{ $item->name_eng }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="account_id" id="accountId">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <p id="dateMessage" style="color: red" class="text-center"></p>
                        <table class="display myTable  table-responsive table table-stripped table-bordered mt-3">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Item Code</th>
                                    <th>Description</th>
                                    <th>&nbsp;&nbsp;&nbsp;S/N &nbsp;&nbsp;&nbsp;</th>
                                    <th>Mode of purchase</th>
                                    <th>Image</th>
                                    <th>Asset Category <span class="customSpan">(Required)</span></th>
                                    <th>&nbsp;&nbsp;&nbsp; F/A Code &nbsp;&nbsp;&nbsp; <span class="customSpan">(Required)</span></th>
                                    <th>Warranty From <span class="customSpan">(Required)</span></th>
                                    <th>&nbsp;&nbsp;&nbsp&nbsp;&nbsp &nbsp; Year&nbsp;&nbsp;&nbsp&nbsp;&nbsp &nbsp; <span class="customSpan">(Required)</span></th>
                                    <th>Warranty To <span class="customSpan">(Required)</span></th>
                                    <th>Quantity <span class="customSpan">(Required)</span></th>
                                    <th>Amount <span class="customSpan">(Required)</span></th>
                                    @foreach ($cost as $vCost)
                                        <th>{{ $vCost->name }}</th>
                                    @endforeach
                                    <th>T.A W/O Vat </th>
                                    <th>Vat Amount</th>
                                    <th>Total Amount</th>
                                    <th>Cost Center <span class="customSpan">(Required)</span></th>
                                    <th> Location (Cost Center) </th>
                                    <th> Country Location </th>
                                    <th> Statutory Location </th>
                                    <th> Sub Location </th>
                                    <th> Floor Location  </th>
                                    <th> Sub Location (Floor) </th>
                                    <th> Room Location </th>
                                    <th> Sub Location (Room) </th>
                                    <th> Department </th>
                                    <th> Sub Department </th>
                                    <th> Location </th>
                                    <th> Percentage <span class="customSpan">(Required)</span></th>
                                    <th> Residual Value</th>
                                </tr>
                            </thead>
                            <tbody id="DataResult">
                                @php($sl = 1)
                                @for ($i = 0; $i < 5; $i++)
                                    <tr class="data" data-id="{{ $i }}">
                                        <td>{{ $sl++ }}</td>
                                        <td>
                                            <select name="item_id[]"
                                                onchange="getProductinfo(this.value,{{ $i }})"
                                                class="form-control SpecialSelect product"
                                                id="productId-{{ $i }}">
                                                <option value="0">Choose One</option>
                                            </select>
                                            <input type="hidden" name="acc_group_id[]"
                                                id="accountsGroupId-{{ $i }}">
                                        </td>
                                        <td>
                                            <input type="text" disabled class="form-control" name="description[]"
                                                id="description-{{ $i }}">
                                        </td>
                                        <td style="width: 100%">
                                            <input type="text" disabled class="form-control" name="sn[]"
                                                id="sn-{{ $i }}" />
                                        </td>

                                        <td style="width: 100%">
                                            <input type="text" disabled class="form-control" name="mode_of_purchase[]"
                                                id="ModeOfpur-{{ $i }}" />
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-warning btn-sm" disabled
                                                onclick="showImage({{ $i }})" id="image-{{ $i }}"><i
                                                    class="fas fa-image"></i></button>
                                        </td>

                                        <td>
                                            <select name="fixed_asset_category_id[]"
                                                onchange="faCodeAuto({{ $i }},this.value)"
                                                class="form-control SpecialSelect" id="assetCategory-{{ $i }}"
                                                disabled required>
                                                <option value="">Select Category</option>
                                                @foreach ($assetCategory as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name_eng }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td style="width: 100%">
                                            <input type="text" required readonly
                                                onkeyup="searchFacode({{ $i }})" class="form-control"
                                                name="fa_code[]" id="faCode-{{ $i }}" />
                                        </td>
                                        <td>
                                            <input type="date" required value="0" disabled class="form-control"
                                                name="warranty_from[]" id="warrantyFrom-{{ $i }}">
                                        </td>
                                        <td>
                                            <input type="text" value="" disabled required onchange="endDateGenerate({{ $i }})"
                                                class="form-control" name="total_days[]"
                                                id="totalDays-{{ $i }}">
                                        </td>
                                        <td>
                                            <input type="date" required value="0" disabled class="form-control"
                                                name="warranty_to[]" id="warrantyTo-{{ $i }}">
                                        </td>
                                        <td>
                                            <input type="number" required disabled onkeyup="qtyAmount({{ $i }})"
                                                class="form-control" name="qty[]" id="qty-{{ $i }}" />
                                        </td>
                                        <td>
                                            <input type="number" disabled onkeyup="qtyAmount({{ $i }})" value="0"
                                                class="form-control" name="amount[]" id="amount-{{ $i }}">
                                        </td>
                                        {{-- start for displaying all cost --}}
                                        @foreach ($cost as $vCost)
                                            <td>
                                                <input type="hidden" class="form-control cost" value="{{ $vCost->id }}"
                                                    name="{{ $vCost->name . '_id[]' }}" />
                                                <input type="number" onkeyup="allCost({{ $i }})" disabled
                                                    value="0" class="form-control cost{{ $i }}"
                                                    placeholder="{{ $vCost->name }}"
                                                    name="{{ $vCost->name . '_val[]' }}" />

                                            </td>
                                        @endforeach
                                        {{-- start for displaying all cost --}}
                                        <td>
                                            <input type="number" readonly value="0" class="form-control"
                                                name="ta_wo_vat[]" id="taWoVat-{{ $i }}">
                                            <input type="hidden" value="0" class="form-control"
                                                id="hiddentaWoVat-{{ $i }}">
                                        </td>
                                        <td>
                                            <input type="number" disabled value="0"
                                                onkeyup="vatAmount({{ $i }})" class="form-control"
                                                name="vat_amount[]" id="vatAmount-{{ $i }}">
                                        </td>
                                        <td>
                                            <input type="number" readonly value="0" class="form-control totalAmount"
                                                name="total_amount[]" id="totalAmount-{{ $i }}">
                                        </td>
                                        <td>
                                            <select name="cost_center[]" disabled required class="form-control SpecialSelect"
                                                id="costCenter-{{ $i }}">
                                                @foreach ($costCenter as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" disabled class="form-control" name="location_costcenter[]"
                                                id="locationCostcenter-{{ $i }}">
                                        </td>
                                        <td>
                                            <select name="country_location[]" disabled class="form-control SpecialSelect"
                                                id="countryLocation-{{ $i }}">
                                                <option value="0">Choose One</option>
                                                @foreach ($costCenter as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" disabled class="form-control" name="statutory_location[]"
                                                id="statutory_location-{{ $i }}">
                                        </td>
                                        <td>
                                            <input type="text" disabled class="form-control" name="sub_location[]"
                                                id="subLocation-{{ $i }}">
                                        </td>
                                        <td>
                                            <select name="floor_location[]" class="form-control SpecialSelect"
                                                id="floorLocation-{{ $i }}">
                                                <option value="0">Choose One</option>
                                                @foreach ($floor as $item)
                                                    <option value="{{ $item->id }}">{{ $item->floor_no }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" disabled class="form-control" name="floor_sublocation[]"
                                                id="floorSubLocation-{{ $i }}">
                                        </td>
                                        <td>
                                            <select name="room_location[]" class="form-control SpecialSelect"
                                                id="roomLocation-{{ $i }}">
                                                <option value="0">Choose One</option>
                                                @foreach ($room as $item)
                                                    <option value="{{ $item->id }}">{{ $item->room_number }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" disabled class="form-control" name="room_sublocation[]"
                                                id="roomSubLocation-{{ $i }}">
                                        </td>
                                        <td>
                                            <select name="department_id[]" class="form-control SpecialSelect"
                                                id="department-{{ $i }}">
                                                <option value="0">Choose One</option>
                                                @foreach ($department as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>

                                        </td>
                                        <td>
                                            <input type="text" disabled class="form-control" name="sub_department[]"
                                                id="subDepartment-{{ $i }}">
                                        </td>
                                        <td><input type="text" disabled class="form-control" name="location[]"
                                                id="location-{{ $i }}"></td>
                                        <td><input type="number" disabled required class="form-control"
                                                name="percentage[]" id="percentage-{{ $i }}"></td>
                                        <td><input type="number" disabled value="0" class="form-control"
                                                name="residual_value[]" id="residualValue-{{ $i }}"></td>
                                    </tr>
                                @endfor
                            </tbody>

                        </table>
                        <div class="row">
                            <div class="col-md-2">
                                <label>Total Amount</label>
                                <input type="number" readonly value="0" class="form-control" name="total_amounts"
                                    id="totalAmounts">

                            </div>
                            <div class="col-md-2">
                                <label>Total Vat Amount</label>
                                <input type="number" readonly value="0" class="form-control" name="total_vat_amount"
                                    id="totalVats">
                            </div>
                            <div class="col-md-2">
                                <label>Total Quantity</label>
                                <input type="number" readonly value="0" class="form-control" name="total_quantity"
                                    id="totalQuantity">
                            </div>
                        </div>
                        <div align="center" class="mt-3">
                            <button type="submit" class="btn btn-danger btn-sm" disabled id="submitBtn">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @include("fixed_asset.fixed_asset_item.modal.image_show")
    @include("fixed_asset.fixed_asset_item.modal.install_form")
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('.SpecialSelect').select2();
            product();
        });
    </script>
    <script src="{{ asset('/') }}fixed-asset/fixed-asset-item/create.js"></script>
    <script src="{{ asset('/') }}fixed-asset/fixed-asset-item/edit.js"></script>
    <script src="{{ asset('/') }}fixed-asset/fixed-asset-item/install_form.js"></script>
@endsection