@extends('driver.layout')

@section('content')
@php
    $date = \Carbon\Carbon::now();
@endphp
<style>
    .btn.btn-border.border-active{
        border-bottom: 2px solid orange;
    }
</style>
<div class="container" style="padding: 10px">
    <div class="col-xs-12" style="padding: 0px 5px">
        <div class="row">
            <div style="width: 45%;float: left;">
                
                <div class="form-group" style="margin: 0">
                    
                    <div class="input-group">
                        <div class="input-group-addon" style="background-color: transparent !important;border: none !important">
                            <i class="fa fa-angle-left" style="font-size: 20px"></i>
                        </div>
                        <input type="text" name="from_date" value="{{date('Y-m-d')}}" class="form-control date_picker" style="box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%);border:none;text-align: center;" onkeypress="return false;">
                        <div class="input-group-addon" style="background-color: transparent !important;border: none !important">
                            <i class="fa fa-angle-right" style="font-size: 20px"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 10%;float: left;text-align: center;padding: 10px">
                To
            </div>
            <div style="width: 45%;float: left;">
                <div class="form-group" style="margin: 0">
                    <div class="input-group">
                        <div class="input-group-addon" style="background-color: transparent !important;border: none !important">
                            <i class="fa fa-angle-left" style="font-size: 20px"></i>
                        </div>
                        <input type="text" name="to_date" value="{{date('Y-m-d')}}" class="form-control date_picker" style="box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%);border:none;text-align: center;" onkeypress="return false;">
                        <div class="input-group-addon" style="background-color: transparent !important;border: none !important">
                            <i class="fa fa-angle-right" style="font-size: 20px"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12" style="padding: 0px 5px">
        <div class="btn-group" role="group" aria-label="Basic example" style="width: 100%;">
            <a href="javascript:;" class="btn btn-border border-active" data-from_date="{{date('Y-m-d')}}" data-to_date="{{date('Y-m-d')}}" style="width: 33.33%;background: #eee">Daily</a>
            <a href="javascript:;" class="btn btn-border" data-from_date="{{$date->startOfWeek()->format('Y-m-d')}}" data-to_date="{{$date->endOfWeek()->format('Y-m-d')}}" style="width: 33.33%;background: #eee">Weekly</a>
            <a href="javascript:;" class="btn btn-border" data-from_date="{{$date->startOfMonth()->format('Y-m-d')}}" data-to_date="{{$date->endOfMonth()->format('Y-m-d')}}" style="width: 33.33%;background: #eee">Monthly</a>
        </div>
    </div>
    <div style="width: 100%;float: left;margin-top: 5px;">
        <div class="" style="width: 50%;float: left;padding: 5px;">
            <a href="{{route('by_status','')}}" style="text-decoration: none">
                <div style="width: 100%;float: left;background: white;text-align: center;border-radius: 10px;padding:20px 10px;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1)">
                    <div style="width: 100%;float: left;">
                        <i class="fa fa-car" style="font-size: 50px"></i>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px">My Delivery</b>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px" id="total">

                        </b>
                    </div>
                </div>
            </a>
        </div>
        <div class="" style="width: 50%;float: left;padding: 5px;">
            <a href="{{route('by_status','processing')}}" style="text-decoration: none">
                <div style="width: 100%;float: left;background: white;text-align: center;border-radius: 10px;padding:20px 10px;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1)">
                    <div style="width: 100%;float: left;">
                        <i class="fa fa-truck" style="font-size: 50px;transform: rotate(90deg);transform: rotateX(180deg);transform: rotateY(180deg);"></i>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px">In Processing</b>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px" id="processing">
                        
                        </b>
                    </div>
                </div>
            </a>
        </div>
        <div class="" style="width: 50%;float: left;padding: 5px;">
            <a href="{{route('by_status','success')}}" style="text-decoration: none">
                <div style="width: 100%;float: left;background: white;text-align: center;border-radius: 10px;padding:20px 10px;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1)">
                    <div style="width: 100%;float: left;">
                        <i class="fa fa-check-circle" style="font-size: 50px"></i>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px">Success</b>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px" id="success">
                        
                        </b>
                    </div>
                </div>
            </a>
        </div>
        <div class="" style="width: 50%;float: left;padding: 5px;">
            <a href="{{route('by_status','delay')}}" style="text-decoration: none">
                <div style="width: 100%;float: left;background: white;text-align: center;border-radius: 10px;padding:20px 10px;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1)">
                    <div style="width: 100%;float: left;">
                        <i class="fa fa-clock-o" style="font-size: 50px"></i>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px">Delay</b>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px" id="delay">
                        
                        </b>
                    </div>
                </div>
            </a>
        </div>
        <div class="" style="width: 50%;float: left;padding: 5px;">
            <a href="{{route('by_status','cancel')}}" style="text-decoration: none">
                <div style="width: 100%;float: left;background: white;text-align: center;border-radius: 10px;padding:20px 10px;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1)">
                    <div style="width: 100%;float: left;">
                        <i class="fa fa-ban" style="font-size: 50px"></i>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px">Cancel</b>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px" id="cancel">
                        
                        </b>
                    </div>
                </div>
            </a>
        </div>
        <div class="" style="width: 50%;float: left;padding: 5px;">
            <a href="{{route('driver-delivery-fee')}}" style="text-decoration: none">
                <div style="width: 100%;float: left;background: white;text-align: center;border-radius: 10px;padding:20px 10px;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1)">
                    <div style="width: 100%;float: left;">
                        <i class="fa fa-money" style="font-size: 50px"></i>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px">Delivery Fee</b>
                    </div>
                    <div style="width: 100%;float: left;">
                        <b style="font-size: 13px" id="delivery_fee">
                        
                        </b>
                    </div>
                </div>
            </a>
        </div>
    </div> 
</div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {
            getCount();
            $('.btn-border').click(function(){
                $('.btn-border').removeClass("border-active");
                $(this).addClass("border-active");
                let from_date = $(this).data('from_date');
                let to_date = $(this).data('to_date');
                $('input[name="from_date"]').val(from_date);
                $('input[name="to_date"]').val(to_date);
                getCount();
            });
            $(document).on("change",'input[name="from_date"],input[name="to_date"]',function(){
                getCount();
            });
        });
        function getCount(){
            let from_date = $('input[name="from_date"]').val();
            let to_date = $('input[name="to_date"]').val();
            $.get(window.location, {
                from_date,to_date
            },
                function (data, textStatus, jqXHR) {
                    if(data.status === 200){
                        $('#total').html(data.delivery.total)
                        $('#processing').html(data.delivery.processing)
                        $('#success').html(data.delivery.success)
                        $('#delay').html(data.delivery.delay)
                        $('#cancel').html(data.delivery.cancel)
                        $('#delivery_fee').html('$ '+data.delivery.delivery_fee.toFixed(2))
                    }
                },
                "JSON"
            );
        }
    </script>
@endsection