@extends('admin::layouts.app')

@section('content')
    <section class="content mb-5">
        <div class="container-fluid">

            <div class="row titlepad">
                <div class="col-md-12">

                    <div class="mt-3 mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <h4>{{ __('label.dashboard') }}</h4>
                            <p>{{ __('admin.showing_result_as_on') }} {{ date('d-m-Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-12">
                    <form method="GET">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>{{ __('admin.select_business_artist') }}</label>
                                    <select class="form-control selectpicker" name="business_user_id">
                                        <option value="">{{ __('label.Select') }}</option>
                                        @foreach ($businessUsers as $user)
                                            <option value="{{ $user->id }}"
                                                @if ($user->id == $businessUserId) selected @endif>
                                                {{ ucwords($user->name) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>{{ __('label.from_date') }}</label>
                                    <input type="date" name="from_date" value="{{ $fromDate }}"
                                        class="form-control selectpicker">
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>{{ __('label.to_date') }}</label>
                                    <input type="date" name="to_date" value="{{ $toDate }}"
                                        class="form-control selectpicker">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="exampleFormControlSelect1">&nbsp;</label><br>
                                    <button type="submit" href="#" class="btn btn-primary w-auto"><i
                                            class="fa fa-search"></i> {{ __('dashboard.search') }}</button>

                                </div>
                            </div>

                        </div>
                    </form>
                    <div class="row">
                        <section class="col-lg-8 connectedSortable">

                            <h5 class=" mt-3">{{ __('admin.my_statistic') }}</h5>
                            <div class="mt-2 mb-2">
                                <div class="dashbed-border-bottom"></div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="curveBox shadow">
                                        <div class="row row-flex">
                                            <div class="col-3">
                                                <div class="bluecolor iconSetting">
                                                    <img src="/admin-assets/img/light-contacts.svg">
                                                </div>
                                            </div>
                                            <div class="col-9 pl-2">
                                                <a class="dashTitle font-weight-light my-2 ml-3 text-black" href="#"
                                                    data-toggle="modal">{{ $totalBusinessUser }}</a>
                                                <div class="dot-blue mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('admin.registered') }}</div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="curveBox shadow">
                                        <div class="row row-flex">
                                            <div class="col-3">
                                                <div class="orangecolor iconSetting">
                                                    <img src="/admin-assets/img/light-contacts.svg">
                                                </div>
                                            </div>
                                            <div class="col-9 pl-2">
                                                <a href="/admin/business-users/pending">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $businessUserCountPending }}</h2>
                                                </a>
                                                <div class="dot-orange mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('admin.pending_for_approval') }}</div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="curveBox shadow">
                                        <div class="row row-flex">
                                            <div class="col-3">
                                                <div class="greencolor iconSetting">
                                                    <img src="/admin-assets/img/light-contacts.svg">
                                                </div>
                                            </div>
                                            <div class="col-9 pl-2">
                                                <a href="/admin/business-users/approved">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $businessUserCountApproved }}</h2>
                                                </a>
                                                <div class="dot-green mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('admin.approved') }}</div>

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

                            <h5 class=" mt-3">{{ __('admin.booking_statistic') }}</h5>
                            <div class="mt-2 mb-2">
                                <div class="dashbed-border-bottom"></div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="curveBox shadow">
                                        <div class="row row-flex">
                                            <div class="col-3">
                                                <div class="bluecolor iconSetting">
                                                    <img src="/admin-assets/img/light-contacts.svg">
                                                </div>
                                            </div>
                                            <div class="col-9 pl-2">
                                                <a class="dashTitle font-weight-light my-2 ml-3 text-black"
                                                    href="#sansaction" data-toggle="modal">{{ $totalApoointmentCount }}</a>
                                                <div class="dot-blue mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('admin.total_bookings') }}</div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- <div class="col-md-4">
                                    <div class="curveBox shadow">
                                        <div class="row row-flex">
                                            <div class="col-3">
                                                <div class="orangecolor iconSetting">
                                                    <img src="/admin-assets/img/light-contacts.svg">
                                                </div>
                                            </div>
                                            <div class="col-9 pl-2">
                                                <a href="/admin/bookings/new">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $newBookingCount }}
                                                    </h2>
                                                </a>
                                                <div class="dot-orange mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('admin.new_bookings') }}
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="col-md-4">
                                    <div class="curveBox shadow">
                                        <div class="row row-flex">
                                            <div class="col-3">
                                                <div class="greencolor iconSetting">
                                                    <img src="/admin-assets/img/light-contacts.svg">
                                                </div>
                                            </div>
                                            <div class="col-9 pl-2">
                                                <a href="/admin/bookings">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $todayAppointmentCount }}</h2>
                                                </a>
                                                <div class="dot-green mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('label.today_appointment') }}</div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="curveBox shadow">
                                        <div class="row row-flex">
                                            <div class="col-3">
                                                <div class="pinkcolor iconSetting">
                                                    <img src="/admin-assets/img/light-contacts.svg">
                                                </div>
                                            </div>
                                            <div class="col-9 pl-2">
                                                <a class="dashTitle font-weight-light my-2 ml-3 text-black"
                                                    href="/admin/bookings/upcoming">{{ $upcomingAppointmentCount }}</a>
                                                <div class="dot-pink mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('label.upcoming_appointment') }}</div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="curveBox shadow">
                                        <div class="row row-flex">
                                            <div class="col-3">
                                                <div class="bluecolor iconSetting">
                                                    <img src="/admin-assets/img/light-contacts.svg">
                                                </div>
                                            </div>
                                            <div class="col-9 pl-2">
                                                <a href="/admin/bookings/completed">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $completeAppointmentCount }}</h2>
                                                </a>
                                                <div class="dot-blue mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('admin.completed_appointments') }}</div>

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


                        </section>

                        <section class="col-lg-4 mb-4 connectedSortable">

                            <div class="card px-3 h-100">

                                <h5 class=" mt-3">{{ __('admin.total_revenue') }}</h5>
                                <div class="mt-2 mb-2 mb-sm-0">
                                    <div class="dashbed-border-bottom"></div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="curveBox border">
                                            <div class="row row-flex">
                                                <div class="col-3">
                                                    <div class="orangecolor iconSetting">
                                                        <img src="/admin-assets/img/light-contacts.svg">
                                                    </div>
                                                </div>
                                                <div class="col-9 pl-2">
                                                    <a class="dashTitle font-weight-light my-2 ml-3 text-black"
                                                        href="#sansaction" data-toggle="modal">{{ $totalEarning }}
                                                        <span>{{ __('admin.sar') }}</span></a>
                                                    <div class="dot-orange mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.revenue') }}
                                                    </div>

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


                                </div>

                                <h5 class=" mt-3">{{ __('admin.customers') }}</h5>
                                <div class="mt-2 mb-2 mb-sm-0">
                                    <div class="dashbed-border-bottom"></div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="curveBox border">
                                            <div class="row row-flex">
                                                <div class="col-3">
                                                    <div class="bluecolor iconSetting">
                                                        <img src="/admin-assets/img/light-contacts.svg">
                                                    </div>
                                                </div>
                                                <div class="col-9 pl-2">
                                                    <a class="dashTitle font-weight-light my-2 ml-3 text-black"
                                                        href="/admin/customers">{{ $customerCount }}</a>
                                                    <div class="dot-blue mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.total_customers_registered') }}</div>

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


                                </div>

                                <h5 class=" mt-3">{{ __('admin.blacklist_business_artist') }}</h5>
                                <div class="mt-2 mb-2 mb-sm-0">
                                    <div class="dashbed-border-bottom"></div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="curveBox border">
                                            <div class="row row-flex">
                                                <div class="col-3">
                                                    <div class="pinkcolor iconSetting">
                                                        <img src="/admin-assets/img/light-contacts.svg">
                                                    </div>
                                                </div>
                                                <div class="col-9 pl-2">
                                                    <a class="dashTitle font-weight-light my-2 ml-3 text-black"
                                                        href="#sansaction"
                                                        data-toggle="modal">{{ $businessUserCountBlacklist }}</a>
                                                    <div class="dot-pink mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.block_business') }}
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        @if (Auth::user()->hasPermission('admin.monthly-order-counts'))
                            <section class="col-lg-6 connectedSortable">
                                <div class="card">
                                    <div class="card-header border-0 pb-0">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <h4 class="card-title float-none">{{ __('admin.bookings') }}</h4>
                                                <p class="f-14">{{ __('admin.graphical_view') }}</p>
                                            </div>
                                            <div class="col-sm-6 text-sm-right">
                                                <p class="mt-3 mb-0" id="date-range">
                                                    {{ __('admin.showing_results_from') }}
                                                    <strong> </strong>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div id="salechart"></div>
                                    </div>
                                </div>

                            </section>
                        @endif

                        @if (Auth::user()->hasPermission('admin.monthly-earning'))
                            <section class="col-lg-6 connectedSortable">
                                <div class="card">
                                    <div class="card-header border-0 pb-0">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <h4 class="card-title float-none">{{ __('admin.my_earning') }}</h4>
                                                <p class="f-14">{{ __('admin.in_sar') }}</p>
                                            </div>
                                            <div class="col-sm-6 text-sm-right">
                                                <p class="mt-3 mb-0" id="date-range-earning">
                                                    {{ __('admin.showing_results_from') }}
                                                    <strong></strong>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div id="earnchart"></div>
                                    </div>
                                </div>
                            </section>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    @include('admin::layouts.scripts')

    <script>
        $(document).ready(function() {
            $.get('/admin/monthly-order-counts', function(data) {
                console.log(data.startDate, data.endDate);
                const dateRange = data.startDate + ' - ' + data.endDate;
                $('#date-range strong').text(dateRange);
            });
        });

        $(document).ready(function() {
            $.get('/admin/monthly-earning', function(data) {
                console.log(data.startDate, data.endDate);
                const dateRange = data.startDate + ' - ' + data.endDate;
                $('#date-range-earning strong').text(dateRange);
            });
        });

        $(document).ready(function() {
            $.get('/admin/monthly-order-counts', function(data) {
                Highcharts.chart('salechart', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: ''
                    },
                    xAxis: {
                        categories: data.months,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '{{ __('master.total_order_count') }}'
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        },
                        series: {
                            borderRadius: 8,
                            pointPadding: .3
                        },
                    },
                    series: [{
                        name: '{{ __('admin.bookings') }}',
                        data: data.data,
                        color: '#25DAE6'
                    }]
                });
            });
        });


        $(document).ready(function() {
            $.get('/admin/monthly-earning', function(data) {
                Highcharts.chart('earnchart', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: ' '
                    },
                    subtitle: {
                        text: ' '
                    },
                    xAxis: {
                        categories: data.months,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '{{ __('master.earning_in_sar') }}'
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        },
                        series: {
                            borderRadius: 8,
                            pointPadding: .3
                        },
                    },
                    series: [{
                        name: '{{ __('admin.earnings') }}',
                        data: data.data,
                        color: '#F25F84'

                    }]
                });
            });
        });
    </script>
@endsection