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

{{-- Modal --}}
<div class="modal fade" id="ViewStockHistory" 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 stock_log_div">

                        {{-- <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>
                            </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 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="header addPR-head mb-10">
                <div class="float-left">
                    <h3>Select Area</h3>
                </div>
                <div class="_PR_filter pr-15">
                    <div class="form-s2">
                        <select class="form-control formselect stock_area_id" placeholder="Select Area" style="width: 100%!important">
                            <option value="0" selected disabled> Select Area</option>
                            @foreach ($area as $data)
                                <option value="{{$data->id}}">{{$data->area_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="float-left">
                    <h3>Select Distributor</h3>
                </div>
                <div class="_PR_filter pr-15">
                    <div class="form-s2">
                        <select class="form-control formselect stock_distributor_id" placeholder="Select  Distributor"
                            style="width: 100%!important">
                            <option value="0" selected disabled> Select Distributor</option>
                            
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-12 p-0">
                <div class="topstats">
                    <div class="row m-0">
                        <div class="col-4">
                            <div class="gary-box"><strong>Total Products:</strong> <span class="ttl_stock_products">0</span></div>
                        </div>
                        <div class="col-4">
                            <div class="gary-box"><strong>Total Amount:</strong> <span class="ttl_stock_amount">0</span></div>
                        </div>
                        <div class="col-4">
                            <div class="gary-box"><strong>Stock Audits:</strong> <span class="ttl_stock_audit">0</span></div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="row qty-units">
                            <div class="col"><strong>Cartons:</strong> <span class="ttl_stock_ctn">0</span></div>
                            <div class="col"><strong>Dozen:</strong> <span class="ttl_stock_dzn">0</span></div>
                            <div class="col"><strong>Half Dozen:</strong> <span class="ttl_stock_hdzn">0</span></div>
                        </div>
                    </div>

                </div>
            </div>


            <div class="loader-sell360 loader_div" style="display: none">
            <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                <span class="txt"><span></span> LOADING...</span> </div>
            </div>

            <div class="body stock_report_table_div">
                {{-- <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="#ViewStockHistory">View
                                    History</button></td>
                        </tr>

                    </tbody>
                </table> --}}
            </div>
        </div>
    </div>
</div>
@endsection