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

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

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

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

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

        .card-body {
            background-color: lemonchiffon;
        }

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

    </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">
                <div class="card-header custom-card text-center"><b class="blink">Fixed Asset Register</b></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-2">

                        </div>
                        <div class="col-10">
                            <div class="row">
                                <div class="col-2">
                                    <label>Floor</label>
                                    <select name="floor_id" style="width:100%" class="form-control SpecialSelect"
                                        id="floorId">
                                        <option value="0">Choose One</option>
                                        @foreach ($floor as $item)
                                            <option value="{{ $item->id }}">{{ $item->floor_no }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-2">
                                    <label>Room</label>
                                    <select name="room_id" style="width:100%" class="form-control SpecialSelect"
                                        id="roomId">
                                        <option value="0">Choose One</option>
                                        @foreach ($room as $item)
                                            <option value="{{ $item->id }}">{{ $item->room_number }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-2">
                                    <label>F.A.Code</label>
                                    <input type="text" name="fa_code" id="faCode" class="form-control" />
                                </div>
                                <div class="col-2">
                                    <label>Item</label>
                                    <select name="item_id" style="width:100%" class="form-control SpecialSelect"
                                        id="itemId">
                                        <option value="0">Choose One</option>
                                        @foreach ($products as $item)
                                            <option value="{{ $item->id }}">{{ $item->name_eng }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-2">
                                    <div style="margin-top: 16%">
                                        <button class="btn btn-danger btn-sm" onclick="reportFilter()"><i
                                                class="fas fa-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class='text-right'>

                    </div>
                    <div class="text-center">
                        <div class="row">
                            <div class="col-md-3">

                            </div>
                            <div class="col-md-6">
                               <b> Floor</b>: &nbsp; <span style="color: red" id="floors"></span>
                                <b>Room No</b>: &nbsp; <span style="color: red" id="rooms"></span>
                            </div>
                            <div class="col-md-3">

                            </div>
                        </div>
                    </div>
                    <p id="dateMessage" style="color: red" class="text-center"></p>
                    <table class="display myTable datatable table-responsive table table-stripped table-bordered mt-3">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Item Name</th>
                                <th>Item Category</th>
                                <th>Model/Description Of Item</th>
                                <th>Date Of Purchase </th>
                                <th>Mode Of Purchase</th>
                                <th>Qty Of Item</th>
                                <th>Unit Value </th>
                                <th>Total Value</th>
                                <th>Id Code</th>
                                <th>Estimated life</th>
                                <th>
                                    Remarks
                                </th>
                            </tr>
                        </thead>
                        <tbody id="DataResult">
                            <tr>

                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('.SpecialSelect').select2();
        });
    </script>
    <script src="{{ asset('/') }}fixed-asset/fixed-asset-item/report.js"></script>
@endsection