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

{{-- View History Modal --}}
<div class="modal fade" id="HistoryModal" 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 view_history_body">
                        <table class="table table-hover dt-responsive nowrap stock_log_table" 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 >
                            </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 area_id_stock_report" placeholder="Select Area" style="width: 100%!important">
                            <option value="0" disabled selected=""> 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 distributor_id_stock_report" 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="total_stock_products">0</span></div>
                        </div>
                        <div class="col-4">
                            <div class="gary-box"><strong>Total Amount:</strong> <span class="total_stock_amount">0</span></div>
                        </div>
                        <div class="col-4">
                            <div class="gary-box"><strong>Stock Audits:</strong> <span class="total_stock_audits">0</span></div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="row qty-units parent_units_div">
                            
                        </div>
                    </div>

                </div>
            </div>
            <div class="body body_dist_products">
               
            </div>
        </div>
    </div>
</div>
@endsection