@extends('dashboard.layout.layout')

@section('content')
    {{-- <div class="card border-info bg-transparent"> --}}

    <!-- Developer Meetup Card -->

    <!--/ Developer Meetup Card -->
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">{{trans('dashboard.report.search_by_date')}}</h4>
        </div>
        <div class="card-body">
            <form action="{{route('dashboard.report.index')}}">
            <div class="row">
               
                    <div class="col-md-5 form-group">
                        <label for="fp-default">{{trans('dashboard.report.from')}}</label>
                        <input type="date" name="from" id="fp-default" class="form-control " value="{{request('from')}}" placeholder="YYYY-MM-DD" />
                    </div>
                    <div class="col-md-5 form-group">
                        <label for="fp-default">{{trans('dashboard.report.to')}}</label>
                        <input type="date" name="to" id="fp-default" class="form-control "  value="{{request('to')}}" placeholder="YYYY-MM-DD" />
                    </div>
                   
                    <button type="submit" class="btn btn-info col-mt-5" style="height:fit-content;margin-top:1.4%">{{trans('dashboard.report.search')}}</button>
             
              
            </div>
        </form>
        </div>
    </div>
    <div class="row match-height">
        <!-- User Timeline Card -->
        <div class="col-lg-8 col-12">
            <div class="card card-user-timeline">
                {{-- <div class="card-header">
                    <div class="d-flex align-items-center">
                        <i data-feather="list" class="user-timeline-title-icon"></i>
                        <h4 class="card-title">User Timeline</h4>
                    </div>
                    <i data-feather="more-vertical" class="font-medium-3 cursor-pointer"></i>
                </div> --}}
                <div class="card-body">
                    <ul class="timeline ml-50 mb-0">
                        <li class="timeline-item">
                            <span class="timeline-point timeline-point-indicator"></span>
                            <div class="timeline-event">
                                <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                    <h6>{{ trans('dashboard.report.lucky_box_wallet_title') }}</h6>
                                    <span
                                        class="timeline-event-time mr-1">{{ @optional($lucky_box_balance_last_element_date->created_at)->format('y-m-d') ?? date('y-m-d') }}</span>
                                </div>
                                <p>{{ trans('dashboard.report.lucky_box_balance') }}</p>
                                <div class="media align-items-center">
                                    <i height="23" class="icofont-gift  font-medium-3"> </i>
                                    <h6 class="media-body mb-0 ml-2 "> {{ $lucky_box_balance }}</h6>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-item">
                            <span class="timeline-point timeline-point-warning timeline-point-indicator"></span>
                            <div class="timeline-event">
                                <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                    <h6>{{ trans('dashboard.report.charge_transaction_sum') }}</h6>
                                    <span class="timeline-event-time mr-1">
                                        {{ @optional($last_charge_transaction->created_at)->format('y-m-d') ?? date('y-m-d') }}</span>
                                </div>

                                <div class="media align-items-center">
                                    <div class="avatar mr-50">
                                        <i class="icofont-price font-medium-3" width="38" height="38"> </i>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="mb-0">{{ $charge_transaction_sum }}</h6>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-item">
                            <span class="timeline-point timeline-point-info timeline-point-indicator"></span>
                            <div class="timeline-event">
                                <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                    <h6>{{ trans('dashboard.report.withdrawal_transaction_sum') }}</h6>
                                    <span class="timeline-event-time mr-1">
                                        {{ @optional($last_withdrawal_transaction->created_at)->format('y-m-d') ?? date('y-m-d') }}</span>
                                </div>

                                <div class="media align-items-center">
                                    <div class="avatar mr-50">
                                        <i class="icofont-pay font-medium-5" width="33" height="33"></i>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="mb-0">{{ $withdrawal_transaction_sum }}</h6>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-item">
                            <span class="timeline-point timeline-point-danger timeline-point-indicator"></span>
                            <div class="timeline-event">
                                <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                    <h6>{{ trans('dashboard.report.transfer_transaction_sum') }}</h6>
                                    <span
                                        class="timeline-event-time mr-1">{{ @optional($last_transfer_transaction->created_at)->format('y-m-d') ?? date('y-m-d') }}</span>
                                </div>
                                <div class="media align-items-center">
                                    <div class="avatar mr-50">
                                        <i class="icofont-refresh font-medium-10" width="33" height="33"></i>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="mb-0">{{ $transfer_transaction_sum }}</h6>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li class="timeline-item">
                            <span class="timeline-point timeline-point-danger timeline-point-indicator"></span>
                            <div class="timeline-event">
                                <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                    <h6>{{ trans('dashboard.report.loans') }}</h6>
                                    <span
                                        class="timeline-event-time mr-1">{{ @optional($last_transfer_transaction->created_at)->format('y-m-d') ?? date('y-m-d') }}</span>
                                </div>
                                <div class="media align-items-center">
                                    <div class="avatar mr-50">
                                        <i class="icofont-refresh font-medium-10" width="33" height="33"></i>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="mb-0">{{ $loans }}</h6>
                                    </div>
                                </div>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card card-developer-meetup">
                <div class="meetup-img-wrapper rounded-top text-center">
                    <img src="{{ setting('logo') }}" alt="Meeting Pic" height="170" />
                </div>
                <div class="card-body">
                    <div class="meetup-header d-flex align-items-center">
                        <div class="meetup-day">
                            <h6 class="mb-0">{{ date('Y-m-d') }}</h6>
                        </div>
                        <div class="my-auto">
                            <h4 class="card-title mb-25">{{ trans('dashboard.report.orders') }}</h4>
                            <p class="card-text mb-0">{{ $sum_all_finished_orders }}</p>
                        </div>
                    </div>
                    <div class="media">
                        <div class="avatar bg-light-primary rounded mr-1">
                            <div class="avatar-content">
                                <i data-feather="calendar" class="avatar-icon font-medium-3"></i>
                            </div>
                        </div>
                        <div class="media-body">
                            <h6 class="mb-0">{{ $driver_subscribtions }}</h6>
                            <small>{{ trans('dashboard.report.driver_subscribtions_sum') }}</small>
                        </div>
                    </div>
                    <div class="media">
                        <div class="avatar bg-light-primary rounded mr-1">
                            <div class="avatar-content">
                                <i data-feather="map-pin" class="avatar-icon font-medium-3"></i>
                            </div>
                        </div>
                        <div class="media-body">
                            <h6 class="mb-0">{{ $finished_orders_count }}</h6>
                            <small>{{ trans('dashboard.report.order_count') }}</small>
                        </div>
                    </div>
                    <div class="media">
                        <div class="avatar bg-light-primary rounded mr-1">
                            <div class="avatar-content">
                                <i data-feather="calendar" class="avatar-icon font-medium-3"></i>
                            </div>
                        </div>
                        <div class="media-body">
                            <h6 class="mb-0">{{ $driver_subscribtions_count }}</h6>
                            <small>{{ trans('dashboard.report.driver_subscribtions') }}</small>
                        </div>
                    </div>

                    <div class="avatar-group">
                        @foreach ($drivers as $item)

                            <div data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom"
                                data-original-title="Billy Hopkins" class="avatar pull-up">
                                <img src="{{ $item }}" alt="Avatar" width="33" height="33" />
                            </div>
                        @endforeach

                        <h6 class="align-self-center cursor-pointer ml-50 mb-0">+{{ $drivers_count }}</h6>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="col-lg-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-header flex-column align-items-start pb-0">
                    <div class="avatar bg-light-success p-50 m-0">
                        <div class="avatar-content">
                            <i class="icofont-pay font-medium-5" ></i>
                        </div>
                    </div>
                    <h2 class="font-weight-bolder mt-1">97.5k</h2>
                    <p class="card-text">Revenue Generated</p>
                </div>
                <div id="line-area-chart-2"></div>
            </div>
        </div> --}}
    </div>
    <div class="col-lg-12 col-12">
        <div class="card card-statistics">
            <div class="card-header">
                <h4 class="card-title">{{ trans('dashboard.report.order_details') }}</h4>
                <div class="d-flex align-items-center">
                    <p class="card-text mr-25 mb-0">
                        {{ @optional($last_order->created_at)->format('y-m-d') ?? date('y-m-d') }}</p>
                </div>
            </div>
            <div class="card-body statistics-body">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-12 mb-2 mb-md-0">
                        <div class="media">
                            <div class="avatar bg-light-primary mr-2">
                                <div class="avatar-content">
                                    <i data-feather="trending-up" class="avatar-icon"></i>
                                </div>
                            </div>
                            <div class="media-body my-auto">
                                <h4 class="font-weight-bolder mb-0">{{ $sum_trip_orders }}</h4>
                                <p class="card-text font-small-3 mb-0">{{ trans('dashboard.report.sum_trip_orders') }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-12 mb-2 mb-md-0">
                        <div class="media">
                            <div class="avatar bg-light-info mr-2">
                                <div class="avatar-content">
                                    <i data-feather="user" class="icofont-user"></i>
                                </div>
                            </div>
                            <div class="media-body my-auto">
                                <h4 class="font-weight-bolder mb-0">{{ $sum_city_orders }}</h4>
                                <p class="card-text font-small-3 mb-0">{{ trans('dashboard.report.sum_city_orders') }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-12 mb-2 mb-sm-0">
                        <div class="media">
                            <div class="avatar bg-light-danger mr-2">
                                <div class="avatar-content">
                                    <i data-feather="box" class="avatar-icon"></i>
                                </div>
                            </div>
                            <div class="media-body my-auto">
                                <h4 class="font-weight-bolder mb-0">{{ $sum_package_orders }}</h4>
                                <p class="card-text font-small-3 mb-0">
                                    {{ trans('dashboard.report.sum_package_orders') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-12">
                        <div class="media">
                            <div class="avatar bg-light-success mr-2">
                                <div class="avatar-content">
                                    <i data-feather="dollar-sign" class="avatar-icon"></i>
                                </div>
                            </div>
                            <div class="media-body my-auto">
                                <h4 class="font-weight-bolder mb-0">{{ $sum_order_orders }}</h4>
                                <p class="card-text font-small-3 mb-0">{{ trans('dashboard.report.sum_order_orders') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ User Timeline Card -->
    <div class="row">

        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="avatar bg-light-info p-50 mb-1">
                        <div class="avatar-content">
                            <i data-feather="eye" class="font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="font-weight-bolder">{{ $sum_budget_orders }}</h2>
                    <p class="card-text">{{ trans('dashboard.report.sum_budget_orders') }}</p>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="avatar bg-light-warning p-50 mb-1">
                        <div class="avatar-content">
                            <i data-feather="message-square" class="font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="font-weight-bolder">{{ $sum_distance_orders }}</h2>
                    <p class="card-text">{{ trans('dashboard.report.sum_distance_orders') }}</p>
                </div>
            </div>
        </div>
        {{-- more --}}
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="avatar bg-light-warning p-50 mb-1">
                        <div class="avatar-content">
                            <i data-feather="message-square" class="font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="font-weight-bolder">{{ $charge_transaction_of_driver_sum }}</h2>
                    <p class="card-text">{{ trans('dashboard.report.sum_driver_charges') }}</p>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="avatar bg-light-warning p-50 mb-1">
                        <div class="avatar-content">
                            <i data-feather="message-square" class="font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="font-weight-bolder">{{ $charge_transaction_of_client_sum }}</h2>
                    <p class="card-text">{{ trans('dashboard.report.sum_clients_charges') }}</p>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="avatar bg-light-warning p-50 mb-1">
                        <div class="avatar-content">
                            <i data-feather="message-square" class="font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="font-weight-bolder">{{ $withdrawal_transaction_of_driver_sum }}</h2>
                    <p class="card-text">{{ trans('dashboard.report.sum_driver_withdrawals') }}</p>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="avatar bg-light-warning p-50 mb-1">
                        <div class="avatar-content">
                            <i data-feather="message-square" class="font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="font-weight-bolder">{{ $withdrawal_transaction_of_client_sum }}</h2>
                    <p class="card-text">{{ trans('dashboard.report.sum_clients_withdrawals') }}</p>
                </div>
            </div>
        </div>
    </div>
    {{-- </div> --}}
    @include('dashboard.layout.delete_modal')
@endsection

@section('vendor_styles')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('dashboardAssets') }}/vendors/css/tables/datatable/datatables.min.css">
@endsection

@section('page_styles')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('dashboardAssets') }}/css/{{ LaravelLocalization::getCurrentLocaleDirection() }}/plugins/charts/chart-apex.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
@endsection
@include('dashboard.report.scripts')