@extends('layouts.app')

@section('title') Inventory @endsection

@section('content')
@php
    $residential_id = Request::segment(3);    
@endphp
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="d-flex flex-column-fluid pb-20">
        <div class="container">
		{{--
            <div class="form-group row">
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <select class="form-control selectpicker" data-live-search="true" data-size="4">
                        <option data-tokens="item 1">Item 1</option>
                        <option data-tokens="item 2">Item 2</option>
                        <option data-tokens="item 3">Item 3</option>
                        <option data-tokens="item 4">Item 4</option>
                        <option data-tokens="item 5">Item 5</option>
                        <option data-tokens="item 6">Item 6</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="input-daterange input-group" id="kt_datepicker_5">
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="fas fa-calendar-alt"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" name="start" />
                        <div class="input-group-append">
                            <span class="input-group-text">
                                to
                            </span>
                        </div>
                        <input type="text" class="form-control" name="end" />
                    </div>
                </div>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <a href="#" class="btn font-weight-bold btn-light-primary">Filter</a>
                </div>
            </div>

            <hr class="mt-15 mb-15"> 
		--}}
            
            <div class="row">
                <div class="col-sm-12">
                    <!-- Datatable (JS in datatable-custom.js) -->
					<div id="ListTable"></div>
					{{--   
                    <table class="table table-bordered mt-15 table_inventory_items table-hover" id="inventory_items">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Item Description</th>
                                <th>In (Kg)</th>
                                <th>Out (Kg)</th>
                                <th>Balance</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>						
							<tr>
                                <td>08/13/2021</td>
                                <td>Item 1 description asdad asd as asd ad</td>
                                <td>-</td>
                                <td>100</td>
                                <td>561</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>08/17/2021</td>
                                <td>Item 1 description asdad asd as asd ad</td>
                                <td>50</td>
                                <td>-</td>
                                <td>511</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>08/19/2021</td>
                                <td>Item 1 description asdad asd as asd ad</td>
                                <td>-</td>
                                <td>179</td>
                                <td>332</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>08/25/2021</td>
                                <td>Item 1 description asdad asd as asd ad</td>
                                <td>-</td>
                                <td>150</td>
                                <td>282</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>08/30/2021</td>
                                <td>Item 1 description asdad asd as asd ad</td>
                                <td>-</td>
                                <td>100</td>
                                <td>182</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>09/05/2021</td>
                                <td>Item 1 description asdad asd as asd ad</td>
                                <td>128</td>
                                <td>-</td>
                                <td>310</td>
                                <td></td>
                            </tr>
                       	</tbody>
                    </table>
					 --}}
                </div>
            </div>


            <!-- Modal Item Check-Out Details -->
            <div class="modal fade" id="checkout_details" tabindex="-1" role="dialog" aria-labelledby="checkout_details" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Item Check-Out Details</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <i aria-hidden="true" class="ki ki-close"></i>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table class="table table-bordered table-receivedDetails mb-10">
                                        <tr>
                                            <th>Date</th>
                                            <th>SO#</th>
                                            <th>External/Internal</th>
                                            <th>Item Description</th>
                                            <th>Qty</th>
                                            <th>Unit</th>
                                            <th>Remarks</th>
                                        </tr>
                                        <tr>
                                            <td>30/08/2021</td>
                                            <td><a href="assets/document/do-sample.pdf" target="_blank">SO-30082021-003</a></td>
                                            <td>Jordan Cheng</td>
                                            <td>Item 1 description asdad asd as asd ad</td>
                                            <td>100</td>
                                            <td>Kg</td>
                                            <td>For the purpose of wall construction of LV 09</td>
                                        </tr>
                                    </table>

                                    <ul class="nav nav-pills basic-tabs" id="received_details_Tab">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" href="#stocks">
                                                <span class="nav-text"><i class="fas fa-cubes"></i>Stocks</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#pic">
                                                <span class="nav-text"><i class="fas fa-user"></i>PIC</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#document">
                                                <span class="nav-text"><i class="far fa-file-alt"></i>Document</span>
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content received_details_Tab mt-5" id="received_detailsTabContent">
                                        <div class="tab-pane fade show active" id="stocks" role="tabpanel" aria-labelledby="stocks">
                                            <ul class="info_img_list">
                                                <li>
                                                    <a href="#img1">
                                                        <div class="info_img_bg"
                                                            style="background-image: url(assets/media/stock.jpg);">
                                                        </div>
                                                    </a>
                                                    <a href="#" class="lightbox" id="img1">
                                                        <span style="background-image: url('assets/media/stock.jpg')"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#img2">
                                                        <div class="info_img_bg"
                                                            style="background-image: url(assets/media/stock.jpg);">
                                                        </div>
                                                    </a>
                                                    <a href="#" class="lightbox" id="img2">
                                                        <span style="background-image: url('assets/media/stock.jpg')"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#img3">
                                                        <div class="info_img_bg"
                                                            style="background-image: url(assets/media/stock.jpg);">
                                                        </div>
                                                    </a>
                                                    <a href="#" class="lightbox" id="img3">
                                                        <span style="background-image: url('assets/media/stock.jpg')"></span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="tab-pane fade" id="pic" role="tabpanel" aria-labelledby="pic">
                                            <ul class="info_img_list">
                                                <li>
                                                    <a href="#img9">
                                                        <div class="info_img_bg"
                                                            style="background-image: url(assets/media/driver.jpg);">
                                                        </div>
                                                    </a>
                                                    <a href="#" class="lightbox" id="img9">
                                                        <span style="background-image: url('assets/media/driver.jpg')"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#img10">
                                                        <div class="info_img_bg"
                                                            style="background-image: url(assets/media/driver.jpg);">
                                                        </div>
                                                    </a>
                                                    <a href="#" class="lightbox" id="img10">
                                                        <span style="background-image: url('assets/media/driver.jpg')"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#img11">
                                                        <div class="info_img_bg"
                                                            style="background-image: url(assets/media/driver.jpg);">
                                                        </div>
                                                    </a>
                                                    <a href="#" class="lightbox" id="img11">
                                                        <span style="background-image: url('assets/media/driver.jpg')"></span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="tab-pane fade" id="document" role="tabpanel" aria-labelledby="document">
                                            <ul class="info_img_list">
                                                <li>
                                                    <a href="#img12">
                                                        <div class="info_img_bg"
                                                            style="background-image: url(assets/media/document.jpg);">
                                                        </div>
                                                    </a>
                                                    <a href="#" class="lightbox" id="img12">
                                                        <span style="background-image: url('assets/media/document.jpg')"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#img13">
                                                        <div class="info_img_bg"
                                                            style="background-image: url(assets/media/document.jpg);">
                                                        </div>
                                                    </a>
                                                    <a href="#" class="lightbox" id="img13">
                                                        <span style="background-image: url('assets/media/document.jpg')"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#img14">
                                                        <div class="info_img_bg"
                                                            style="background-image: url(assets/media/document.jpg);">
                                                        </div>
                                                    </a>
                                                    <a href="#" class="lightbox" id="img14">
                                                        <span style="background-image: url('assets/media/document.jpg')"></span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>


                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

@endsection
@section('custom_js')
<script src="{{ asset('js/inventory-site.js') }}"></script>
@endsection