@extends('layouts.master')
@section('content')

<style>
    ._PR_filter{margin-top: -2px; width: 300px!important; float: left}
    ._PR_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 30px!important; font-family: 'proximanova-light', sans-serif!important; font-size: 13px!important;}
    ._PR_filter .form-s2 .select2-container .select2-selection--single, ._PR_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow{height: 31px!important;}
    .addPR-head h3{font-size: 14px; padding-right: 10px; line-height: 2; margin: 0}
    .topstats{margin-top: 5px; font-size: 14px;}
    .topstats .gary-box{line-height: 1;background-color: #f9f9f9;border-bottom: solid 1px #d1d1d1;padding: 10px;letter-spacing: 1px;}
    .topstats .gary-box span{font-family: 'Rationale', sans-serif; color:#0038ba; font-size: 22px; float: right; margin-top: -4px;}
    .qty-units{margin:10px 0 0 0; letter-spacing: 1px;}
    .qty-units .col{background-color: #f6f6f6; border: solid 1px #fff; text-align: center; padding: 5px; line-height:1; font-size: 13px;}
</style>

//model
<div class="modal fade" id="exampleModalhistory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content  top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">History List<span></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">

                        <table class="table table-hover dt-responsive nowrap" id="example2" style="width:100%">
                            <thead>
                            <tr>
                                <th>ITEM</th>
                                <th>STOCK</th>
                                <th>STATE</th>
                                <th>LAST ADDED ON</th>
                                <th>ADDED BY</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>All Rounder Rs.5 (24 Pcs/Box)</td>
                                <td>20</td>
                                <td>Opening Stock </td>
                                <td>2020-07-28 13:30:16</td>
                                <td>sikandar.memon</td>
                            </tr>
                            <tr>
                                <td>All Rounder Rs.5 (24 Pcs/Box)</td>
                                <td>20</td>
                                <td>Opening Stock </td>
                                <td>2020-07-28 13:30:16</td>
                                <td>sikandar.memon</td>
                            </tr>
                            <tr>
                                <td>All Rounder Rs.5 (24 Pcs/Box)</td>
                                <td>20</td>
                                <td>Opening Stock </td>
                                <td>2020-07-28 13:30:16</td>
                                <td>sikandar.memon</td>
                            </tr>
                            <tr>
                                <td>All Rounder Rs.5 (24 Pcs/Box)</td>
                                <td>20</td>
                                <td>Opening Stock </td>
                                <td>2020-07-28 13:30:16</td>
                                <td>sikandar.memon</td>
                            </tr>
                            </tbody>
                        </table>

                    </div>

                </div>
            </div>
            <div class="modal-footer border-0" style="background-color: #f6f6f6">
                <button type="submit" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Close</button>
            </div>
        </div>
    </div>
</div>



<div id="blureEffct" class="container">

            <div class="row mt-2 mb-3">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <h2 class="_head01">Stock <span> Report</span></h2>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <ol class="breadcrumb">
                            <li><a href="#"><span>Stock Management</span></a></li>
                            <li><span>Stock Report</span></li>
                        </ol>
                    </div>
            </div>

            <div class="row">
      <div class="col-md-12">
        <div class="card">

            <div class="col-12 p-0 PT-10">
            <div class="topstats">
              <div class="row m-0">
              <div class="col-4"><div class="gary-box"><strong>Total Products:</strong> <span>425</span></div></div>
              <div class="col-4"><div class="gary-box"><strong>Total Amount:</strong> <span>170,542</span></div></div>
              <div class="col-4"><div class="gary-box"><strong>Stock Audits:</strong> <span>0</span></div></div>
              </div>

              <div class="col-12">
              <div class="row qty-units">
                <div class="col"><strong>Cartons:</strong> 450</div>
                <div class="col"><strong>Dozen:</strong>  450</div>
                <div class="col"><strong>Half Dozen:</strong>  450</div>
              </div>
              </div>

            </div>
            </div>


          <div class="body">
            <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
              <thead>
                <tr>
                  <th>ITEM</th>
                  <th>CURRENT STOCK</th>
                  <th>STATE</th>
                  <th>LAST ADDED ON</th>
                  <th>ACTION</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>All Rounder Rs.5 (24 Pcs/Box)</td>
                  <td>238</td>
                  <td>Order </td>
                  <td>2020-07-28 13:30:16</td>
                  <td><button class="btn btn-default mb-0" data-toggle="modal" data-target="#exampleModalhistory">View History</button></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

<script>
    $('#datepicker, #datepicker2').datepicker({
        autoclose: true,
        todayHighlight: true,
        toggleActive: true,
    }).on('changeDate', function (ev) {
        $(this).datepicker('hide');
    });
</script>