@section('title','sales Profit')
@extends('layouts.master')
@section('style')
{{Html::style('assets/css/daterangepicker.css')}}
<style>
td form {
    display: inline-block;
}
</style>
@endsection


@section('content')
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-6">
               <h5>{{trans('label.Sales Profit')}}</h5>
            </div>
            <div class="col-md-6" style="text-align: right;">
              <button onclick="goBack()" class="btn btn-transparent-border"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{trans('label.Back')}}</button>
            </div>
        </div>
        <div class="row">

                <div class="col-md-3">

                     <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                      <i class="fa fa-calendar"></i>&nbsp;
                      <span></span> <i class="fa fa-caret-down"></i>

                     </div>
                </div>
                <div class="col-md-1 pl-0">
                    <form>
                        <input type="hidden" name="date_range" class="date_range">
                        <input type="submit" value="{{trans('label.Change')}}" class="btn btn-success br-0">
                    </form>

                </div>
            </div>
        <div id='table_position' class="mt-3">

            <div class="row" style="text-align: center;" >
                    <div class="col-md-4">
                        <div class="card bg-secondary">
                            <div class="card-body">
                                <img src="{{ asset('assets/images/icons/cash-received.png') }}" alt="Total Sales">
                                <h4 class="mt-2">{{trans('label.Total Sales')}} </h4>
                                {{ $sales=($tsales ?? 0 )}}
                            </div>
                        </div>
                    </div>
                     <div class="col-md-4">
                        <div class="card bg-secondary">
                            <div class="card-body">
                                <img src="{{ asset('assets/images/icons/payment.png') }}" alt="Cost of goods sold">
                                <h4 class="mt-2">{{trans('label.Cost of goods sold')}}</h4>
                                {{ $cost=($tcgs ?? 0) }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-secondary">
                            <div class="card-body">
                                <img src="{{ asset('assets/images/icons/balance.png') }}" alt="balance">
                                <h4 class="mt-2">{{trans('label.Profit')}}</h4>
                                {{ ($sales  - $cost) }}
                            </div>
                        </div>
                    </div>

            </div>
            @php
            if ($sales!=0) {
                $contribution=(float)($sales-$cost);
                $cm_ratio=(float)($contribution/$sales);
                $profit=(float)($sales-$cost);
                $cost_ratio=(float)($cost/$sales);
                if ($cost_ratio!=0) {
                    $profit_ratio=(float)($profit/$cost);
                }else{
                    $profit_ratio=0;
                }

            }else{
                $cm_ratio=0;$cost_ratio=0;$profit_ratio=0;
            }
            @endphp
            <div class="row " style="text-align: center;" >
                    <div class="col-md-4">
                        <div class="card bg-secondary">
                            <div class="card-body">
                                <img src="{{ asset('assets/images/icons/cash-received.png') }}" alt="Total Sales">
                                <h4 class="mt-2">{{trans('label.Cost Ratio')}} </h4>
                                {{number_format((float)($cost_ratio*100), 2, '.', '')}} %
                            </div>
                        </div>
                    </div>
                     <div class="col-md-4">
                        <div class="card bg-secondary">
                            <div class="card-body">
                                <img src="{{ asset('assets/images/icons/payment.png') }}" alt="Cost of goods sold">
                                <h4 class="mt-2">{{trans('label.Contribution Margin Ration')}}</h4>
                                {{number_format((float)($cm_ratio*100), 2, '.', '')}} %
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-secondary">
                            <div class="card-body">
                                <img src="{{ asset('assets/images/icons/balance.png') }}" alt="balance">
                                <h4 class="mt-2">{{trans('label.Profit')}}:{{trans('label.Cost ratio')}}</h4>
                                {{number_format((float)($profit_ratio*100), 2, '.', '')}} %
                            </div>
                        </div>
                    </div>

            </div>

        </div>
    </div>
</div>

@endsection


@section('script')

<!--stickey kit -->
{{Html::script('assets/js/sticky-kit.min.js')}}
{{Html::script('assets/js/jquery.sparkline.min.js')}}
<!-- This is data table -->
{{Html::script('assets/js/jquery.dataTables.min.js')}}
<!-- start - This is for export functionality only -->
{{Html::script('assets/js/dataTables.buttons.min.js')}}
{{Html::script('assets/js/buttons.flash.min.js')}}
{{Html::script('assets/js/jszip.min.js')}}
{{Html::script('assets/js/pdfmake.min.js')}}
{{Html::script('assets/js/vfs_fonts.js')}}
{{Html::script('assets/js/buttons.html5.min.js')}}
{{Html::script('assets/js/buttons.print.min.js')}}
{{Html::script('assets/custom_js/crud.js')}}
{{Html::script('assets/custom_js/datatable.js')}}

{{Html::script('assets/js/moment.min.js')}}
{{Html::script('assets/js/daterangepicker.min.js')}}

@if($request->all()==null)
<script>

    $(function() {

    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        $('input.date_range').val(start.format('Y-MM-DD')+' '+ end.format('Y-MM-DD'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});
</script>
@else
@php
$time = explode(' ', $_GET['date_range']);
@endphp
@if(array_key_exists(0, $time) && array_key_exists(1, $time))
@php
$start_date = $time[0];
$end_date = $time[1];
@endphp
<input type="hidden" id="start_date" value="{{$start_date }}">
<input type="hidden" id="end_date" value="{{$end_date }}">
<script>

    $(function() {
    var start_date=$('#start_date').val();
    var end_date=$('#end_date').val();
    var start = moment(start_date);
    var end = moment(end_date);

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        $('input.date_range').val(start.format('Y-MM-DD')+' '+ end.format('Y-MM-DD'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});
</script>
@endif
@endif

@endsection