@extends('layouts.admin')
@section('content')
@push('css')
{{-- dropzone --}}
<link href="{{ asset('') }}/assets/libs/dropzone/min/dropzone.min.css" rel="stylesheet" type="text/css" />
<link href="{{ asset('') }}/assets/libs/dropify/css/dropify.min.css" rel="stylesheet" type="text/css" />
<link href="{{ asset('') }}/assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
<link href="{{ asset('') }}/assets/libs/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
<meta name="csrf-token" content="{{csrf_token()}}">
@endpush
<style type="text/css">
.box_1{border-color: red;border-width: 0px 0px 0px 5px; box-shadow: 3px 5px 10px #888888;}
.box_2{border-color: yellow;border-width: 0px 0px 0px 5px; box-shadow: 3px 5px 10px #888888;}
.box_3{border-color: green;border-width: 0px 0px 0px 5px; box-shadow: 3px 5px 10px #888888;}
.box_4{border-color: blue;border-width: 0px 0px 0px 5px; box-shadow: 3px 5px 10px #888888;}
.sign{float: right; color: #DEE2E6;}
.table th {padding: 4px;font-weight: bold;width: 55%;}
.table td{font-weight: bold}
.table-bordered td,
.table-bordered th {border: 2px solid #e9ecef;}
</style>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3 pl-5">
            <div class="card" style="width: 15rem; border: 1px #D4D5D5 solid;">
                <img style="border:1px gray solid" src="{{ asset('uploads/products') }}/{{$product_details->product_image}}" class="card-img-top" alt="...">
                <div class="card-body" style="padding: 0 !important;">
                    <h5 class="card-title pt-2 text-center">{{$product_details->name}}</h5>
                    
                    <table class="table table-bordered">
                        <tbody>
                           
                            <tr>
                                <th>Category:</th>
                                <td>{{$product_details->category->category_name}}</td>
                                
                            </tr>
                            <tr>
                                <th>Sales Price Type:</th>
                                <td>Negotiable</td>
                                
                            </tr>
                            
                        </tbody>
                    </table>
                    
                </div>
            </div>
        </div>
        
        <div class="col-md-9">
            <div class="container" style="background-color: #FFFF; border: 1px #D4D5D5 solid;">
                <div class="row pt-2">
                    <div class="col-md-4">
                        <div class="card w-100 box_1">
                            <div class="card-body">
                                <i class="fas fa-th fa-3x sign"></i>
                                <h6>Purchase Quantity</h6>
                                 <span><b>{{$purchasseQuantity}}</b></span>
                            </div>
                        </div>
                        <div class="card w-100 box_4">
                            <div class="card-body ">
                                <i  class="fas fa-dollar-sign fa-3x sign"></i>
                                <h6>Total Sales Amount</h6>
                                 <span><b>{{$sellAmount}}</b></span>
                                
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card w-100 box_2">
                            <div class="card-body">
                                <i class="fas fa-th fa-3x sign"></i>
                                <h6>Stock Quantity</h6>
                                <span><b>{{$stockQuantity}}</b></span>
                            </div>
                        </div>
                        <div class="card w-100 box_1">
                            <div class="card-body">
                                <i  class="fas fa-dollar-sign fa-3x sign"></i>
                                <h6>Total Purchase Amount</h6>
                                 <span><b>{{$purchaseAmount}}</b></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card w-100 box_1">
                            <div class="card-body">
                                <i  class="fas fa-th fa-3x sign"></i>
                                <h6>Sales Quantity</h6>
                                 <span><b>{{$sellQuantity}}</b></span>
                            </div>
                        </div>
                        <div class="card w-100 box_3">
                            <div class="card-body">
                                <i class="fas fa-dollar-sign fa-3x sign"></i>
                                <h6>Current Stock Value</h6>
                                 <span><b>{{$stockValue}}</b></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            </div> <!-- end col -->
            </div><!--end row-->
            
            </div> <!-- container-fluid -->
            @push('alljs')
            
            <script src="{{ asset('') }}/assets/libs/dropzone/min/dropzone.min.js"></script>
            <script src="{{ asset('') }}/assets/libs/dropify/js/dropify.min.js"></script>
            <script src="{{ asset('') }}/assets/js/pages/form-fileuploads.init.js"></script>
            
            
            @endpush
            @endsection