@extends('dashboard.components.main')
@section('content')
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
    <div class="page-content">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <h4 class="page-title mb-0 font-size-18">@lang('reports.No_Of_Stock_By_Piece')</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item active"> @lang('dashboard_clients.welcome_platform')</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->
<!-- Totals Card -->
<div class="card">
    <div class="card-body">
        <div class="row">
            <p class="text-uppercase font-weight-bold col-lg-4 font-size-18">
                @lang('reports.sum')</p>
            <p class="col-lg-2  text-center text-dark font-size-20">{{ $total }}</p>
        </div>
    </div>
</div>



        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">@lang('reports.No_Of_Stock_By_Piece')</h4>
                        <p class="card-title-desc mb-2">@lang('reports.No_Of_Stock_By_Piece')</p>


                        {{-- <p class="text-center font-size-16" style="width: 100%">
                            @lang('reports.as_of_date') <b class="">2020-12-04</b>
                        </p> --}}

                        <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap"
                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th data-priority="1">@lang('reports.Product_Name')</th>
                                    {{-- <th data-priority="1">@lang('reports.SKU')</th> --}}
                                    <th data-priority="1">@lang('reports.Quantity')</th>
                                    {{-- <th data-priority="1">@lang('reports.Asset_Value')</th> --}}
                                    {{-- <th data-priority="1">@lang('reports.Calculate_Average')</th> --}}
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($products as $product)
                                    
                                <tr>
                                    <td>{{ $product->name }}</td>
                                    <td>{{ $product->total_quantity }}</td>
                                    {{-- <td>@lang('reports.150')</td>
                                    <td>@lang('reports.100')</td>
                                    <td>@lang('reports.120')</td> --}}
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- end col -->
        </div>
        <!-- end row -->


        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex flex-row justify-content-center">
                            <button class="btn btn-success mx-2" onclick="printReportPage()">@lang('reports.Preview_and_Print')</button>
                            <a class="btn btn-success mx-2 popup-form" href="#sendReport">@lang('reports.Email')</a>
                        </div>
                    </div>
                </div>
            </div>

        <!-- Send popup -->

        <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 700px" id="sendReport">
            <div class="card-body">
                <h4 class="mt-0 mb-2">@lang('reports.Send_report')</h4>
                <p class="card-title-desc">@lang('reports.Send_a_report_to_a_prefered_email')</p>

                <form action="{{ route('dashboard.reports.warehouses.number_of_stock_by_piece') }}" method="GET">
                    <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-center">
                        <h5 class="control-label col-lg-2">@lang('reports.To')</h5>
                        <input type="text" placeholder="@lang('reports.enter_email') " name="to" class="form-control col-lg-8">
                    </div>

                    <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-center">
                        <h5 class="control-label col-lg-2">@lang('reports.CC')</h5>
                        <input type="text" placeholder="@lang('reports.enter_email') " name="cc" class="form-control col-lg-8">
                    </div>

                    <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-center">
                        <h5 class="control-label col-lg-2">@lang('reports.Subject')</h5>
                        <input type="text" placeholder="@lang('reports.enter_subject') " name="subject" class="form-control col-lg-8">
                    </div>

                    <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-center">
                        <h5 class="control-label col-lg-2">@lang('reports.Body')</h5>
                        <textarea class="form-control col-lg-8" name="body" cols="30" rows="3" style="resize: none"></textarea>
                    </div>

                    <div class="row">
                        <div class="col-lg-12  my-2 d-flex justify-content-end">
                            <div class="text-right">
                                <button type="submit"
                                    class="btn btn-success"> @lang('reports.Send')</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        </div>

    </div>
@endsection