@extends('layouts.app')

@section('title') Stock Transfer @endsection

@section('content')
<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="row">
                <div class="col-sm-12">
                    <!-- Datatable (JS in datatable-custom.js) -->
                    <table class="table table-bordered mt-15 table_stock_checkout_list table-hover" id="stock_checkout_list">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>SO#</th>
                                <th>SO Date</th>
                                <th>Item Description</th>
                                <th>Qty</th>
                                <th>Unit</th>
                                <th>External/Internal</th>
                                <th>Contact	</th>
                                <th>Remarks</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td><a class="modal-links" data-toggle="modal" data-target="#stock_checkout_form">SO-30082021-0031</a></td>
                                <td>30/08/2021</td>
                                <td>Item 1 description asdad asd as asd ad</td>
                                <td>100</td>
                                <td>Kg</td>
                                <td>Jordan Cheng</td>
                                <td>012-776 4312</td>
                                <td>For the purpose of wall construction of LV 09</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td><a class="modal-links" data-toggle="modal" data-target="#stock_checkout_form">SO-30082021-0031</a></td>
                                <td>30/08/2021</td>
                                <td>Item 2 description asdad asd as asd ad</td>
                                <td>150</td>
                                <td>Kg</td>
                                <td>Jordan Cheng</td>
                                <td>012-776 4312</td>
                                <td>For the purpose of wall construction of LV 03</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td><a class="modal-links" data-toggle="modal" data-target="#stock_checkout_form">SO-30082021-0031</a></td>
                                <td>30/08/2021</td>
                                <td>Item 3 description asdad asd as asd ad</td>
                                <td>179</td>
                                <td>Kg</td>
                                <td>Jordan Cheng</td>
                                <td>012-776 4312</td>
                                <td>For the purpose of wall construction of LV 05</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td><a class="modal-links" data-toggle="modal" data-target="#stock_checkout_form">SO-13082021-002</a></td>
                                <td>13/08/2021</td>
                                <td>Item 1 description asdad asd as asd ad</td>
                                <td>100</td>
                                <td>Kg</td>
                                <td>Alan Teoh</td>
                                <td>012-332 4871</td>
                                <td>for P1 carpark section</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Modal RF -->
            <div class="modal fade" id="stock_checkout_form" tabindex="-1" role="dialog" aria-labelledby="stock_checkout_form" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <h1>Stock Check-Out Form</h1>
                                    <h5>SO#: SO-30082021-003</h5>
                                </div>
                                <div class="col-sm-6">
                                    <div class="address-box text-right">
                                        Arte Cheras,<br>
                                        No.2, Jalan Midah 2,<br>
                                        Taman Midah, Cheras,<br>
                                        56000 Kuala Lumpur<br>
                                        Tel: +6012-123 4567												
                                    </div>
                                    <div class="logo-box">
                                        <div class="logo-rf" style="background-image: url('assets/media/arte-cheras.png');"></div>
                                    </div>
                                </div>
                            </div>

                            <hr class="mt-5 mb-5">

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="to-info">
                                        <strong>To:</strong><br>
                                        Name: Jordan Cheng<br>
                                        Employee#: KPM1090<br>
                                        Contact#: 012-338 9876
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="request-info">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td>Processed Date :</td>
                                                <td>30/08/2021</td>
                                            </tr>
                                            <tr>
                                                <td>Processed by :</td>
                                                <td>Jackson Goh</td>
                                            </tr>
                                            <tr>
                                                <td>Contact # :</td>
                                                <td>017-330 5149</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <table class="table table-bordered table-rf mt-5">
                                        <tr>
                                            <th>#</th>
                                            <th>Item Description</th>
                                            <th>Qty</th>
                                            <th>Unit</th>
                                            <th>Check-Out Date</th>
                                            <th>Remarks</th>
                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td>Item 1 description asdad asd as asd ad</td>
                                            <td>100</td>
                                            <td>Kg</td>
                                            <td>30/08/2021</td>
                                            <td>For the purpose of wall construction of LV 09</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Item 2 description asdad asd as asd ad	</td>
                                            <td>150</td>
                                            <td>Kg</td>
                                            <td>30/08/2021</td>
                                            <td>For the purpose of wall construction of LV 03</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Item 3</td>
                                            <td>179</td>
                                            <td>Kg</td>
                                            <td>30/08/2021</td>
                                            <td>For the purpose of wall construction of LV 05</td>
                                        </tr>
                                    </table>
                                </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>

            <!-- 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