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

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

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

        .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;
        }

        .ui-helper-hidden-accessible {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }
        .custom-card {
            background-color: #318777;
            color: white;
            /* #17A2B8; */
        }
        .card-body{
            background-color: lemonchiffon;
        }
        .blink {
            animation: blinker 4s linear infinite;
            color: yellow;
            font-size: 20px;
            font-weight: bold;
            font-family: sans-serif;
        }

        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }

    </style>
    <div class="row">
        <div class="col-xs-12">
            <h4 class="page-title"> </h4>
        </div>
    </div>
    <div class="row">
        <form action="#" id="form_Id" method="POST">
            @csrf
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header custom-card text-center"> <b class="blink"><u>
                                Fixed Asset Disposal
                            </u></b> </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-3">
                                        <label>Item Name</label>
                                        <select name="item_code" id="itemCode" onchange="FaDetailsInfo()"
                                            class="form-control SpecialSelect">
                                            <option value="">Select One </option>
                                            @foreach ($faCode as $item)
                                                <option value="{{ $item->fa_code }}">{{ $item->product?$item->product->name_eng:'' }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-3">
                                        <label>Date</label>
                                        <input type="date" readonly name="date" class="form-control input-sm" id="dates" />
                                    </div>

                                    <div class="col-3">
                                        <label>Invoice No </label>
                                        <input type="text" readonly name="invoice_no" class="form-control" id="invoiceNo" />
                                    </div>
                                    <div class="col-3">
                                        <label>Item Quantity:</label>
                                        <input type="number" readonly name="quantity" id="Quantity"
                                            class="form-control input-sm" />
                                    </div>

                                    <div class="col-3">
                                        <label>Cost Center</label>
                                        <input type="text" readonly readonly class="form-control" name="costcenter_name"
                                            id="costCenter">
                                    </div>
                                    <div class="col-3">
                                        <label>Fixed Asset Category</label>
                                        <input type="text" readonly name="category_id" id="categoryId" class="form-control">
                                    </div>
                                    <div class="col-3">
                                        <label> Warranty From: </label>
                                        <input type="date" readonly name="warranty_from" id="warrantyFrom"
                                            class="form-control input-sm" />
                                    </div>
                                    <div class="col-3">
                                        <label> Warranty To:</label>
                                        <input type="date" readonly name="warranty_to" id="warrantyTo"
                                            class="form-control input-sm" />
                                    </div>
                                    <div class="col-3">
                                        <label>Percentage</label>
                                        <input type="number" readonly name="percentage" id="percentAge"
                                            class="form-control" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header custom-card text-center"> <b class="blink"><u>
                                Depreciation Info
                            </u></b> </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-3">
                                        <label>Total Asset Value </label>
                                        <input type="number" id="totalAssetValue" name="total_asset_value" readonly
                                            class="form-control " />
                                    </div>
                                    <div class="col-3">
                                        <label> Total Deprecated Value: </label>
                                        <input type="number" readonly name="deprecated_value" class="form-control input-sm"
                                            id="totalDepreciation" />
                                    </div>
                                    <div class="col-3">
                                        <label> Last Depreciation Date: </label>
                                        <p id="lastDepreciationDate"></p>
                                    </div>
                                    <div class="col-3">
                                        <label> Total Remaining Value: </label>
                                        <input type="number" readonly class="form-control" id="totalRemaining"
                                            name="remaining_value" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header custom-card text-center"> <b class="blink"><u>
                                Disposal
                            </u></b> </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-3">
                                        <label>Disposal Type:</label>
                                        <select name="disposal_type" class="form-control SpecialSelect" id="disposaltype"
                                            required>
                                            <option value="">Select One </option>
                                            <option value="2">Close</option>
                                            <option value="3">Sale</option>
                                        </select>
                                    </div>
                                    <div class="col-3 salesClass" style="display: none">
                                        <label> Sale Value: </label>
                                        <input type="number" required onchange="discountValue()" id="SalesValue"
                                            onkeyup="profitLoss(this.value)" name="sale_value"
                                            class="form-control input-sm" />
                                    </div>
                                    <div class="col-3 salesClass" style="display: none">
                                        <label> Discounts(৳) </label>
                                        <input type="number" disabled onchange="discountValue()" id="discounts" name="discount"
                                            class="form-control input-sm" />
                                    </div>
                                    <div class="col-3 salesClass" style="display: none">
                                        <label> Profit Value: </label>
                                        <input type="text" disabled readonly id="profitValue" name="profit_value"
                                            class="form-control input-sm" />
                                    </div>
                                    <div class="col-3 salesClass" style="display: none">
                                        <label> Loss Value: </label>
                                        <input type="text" disabled readonly id="lossValue" name="loss_value"
                                            class="form-control input-sm" />
                                    </div>
                                    <div class="col-3 salesClass" style="display: none">
                                        <label> Net Amount </label>
                                        <input type="number" disabled readonly id="netAmount" name="net_amounts"
                                            class="form-control input-sm" />
                                    </div>

                                    <div class="col-3 salesClass" style="display: none">
                                        <label> Customer </label>
                                        <select name="customer_id" disabled class="form-control SpecialSelect" id="customerId">
                                            <option value="0">Choose One</option>
                                            @foreach ($customer as $v_customer)
                                                <option value="{{ $v_customer->account_id }}">{{ $v_customer->name_eng }}
                                                </option>
                                            @endforeach

                                        </select>
                                    </div>

                                    <div class="col-3 salesClass" style="display: none">
                                        <label> Bank </label>
                                        <select name="bank_id" disabled class="form-control SpecialSelect" id="bankId">
                                            <option value="0">Choose One</option>
                                            @foreach ($bank as $v_bank)
                                                <option value="{{ $v_bank->account_id }}">{{ $v_bank->name_eng }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-3 salesClass" style="display: none">
                                        <label> Cash </label>
                                        <input type="number" disabled onchange="cashValue(this.value)" id="cashs" name="cash"
                                            class="form-control input-sm" />
                                    </div>
                                    <div class="col-3 salesClass" style="display: none">
                                        <label>Due</label>
                                        <input type="number" disabled readonly id="dues" name="due" class="form-control input-sm" />
                                    </div>
                                    {{-- <div class="col-3 salesClass" style="display: none">
                                        <label>Payment Type</label>
                                        <select name="payment_type" disabled id="paymentType"
                                            class="form-control SpecialSelect">
                                            <option value="1">Cash</option>
                                            <option value="2">Bank</option>
                                            <option value="3">Credit</option>
                                        </select>
                                    </div> --}}

                                    <div class="col-3 salesClass" style="display: none">
                                        <label>Remarks</label>
                                        <textarea name="remarks" disabled id="remarks" class="form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin-top:2%">
                        </div>
                        <div align="center" class="mt-3">
                            <button type="submit" class="btn btn-danger btn-sm" disabled id="submitBtn">Submit</button>
                            <a href="{{route('fixed_asset.disposal.create')}}" class="btn btn-info btn-sm ">Refresh</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('.SpecialSelect').select2();
        });
    </script>
    <script src="{{ asset('/') }}fixed-asset/fixed_asset_disposal/create.js"></script>
@endsection