@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_branch') }}</label>
                                    <select class="form-control selectpicker" name="branch_id">
                                        <option value="">{{ __('label.Select') }}</option>
                                        @foreach ($branches as $branch)
                                            <option value="{{ $branch->id }}"
                                                @if ($branch->id == $branch_selected || old('branch_id') == $branch->id) selected @endif>
                                                {{ $branch->name_en }}
                                            </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" class="btn btn-primary w-auto"><i class="fa fa-search"></i>
                                        {{ __('dashboard.search') }}</button>

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

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

                        <section class="col-lg-12 connectedSortable">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="curveBox">
                                        <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">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $todayAppointmentCount }}</h2>
                                                </a>
                                                <div class="dot-orange mb-3"><i
                                                        class="fa fa-circle"></i>{{ __('label.today_appointment') }}</div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="curveBox">
                                        <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/upcoming">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3 text-black">
                                                        {{ $upcomingAppointmentCount }}</h2>
                                                </a>
                                                <div class="dot-blue mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('label.upcoming_appointment') }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="curveBox">
                                        <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 href="/admin/bookings/completed">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $completeAppointmentCount }}</h2>
                                                </a>
                                                <div class="dot-green mb-3"><i
                                                        class="fa fa-circle"></i>{{ __('admin.completed_appointments') }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- <div class="col-md-4">
                                    <div class="curveBox">
                                        <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-pink mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('admin.new_bookings') }}</div>

                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="col-md-4">
                                    <div class="curveBox">
                                        <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/customers">{{ $customerCount }}</a>
                                                <div class="dot-pink mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('admin.total_customers') }}
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @if (auth()->user()->hasRole([app\helpers\ConstantHelper::BUSINESS_USER, app\helpers\ConstantHelper::INDIVIDUAL_USER]))
                                    <div class="col-md-4">
                                        <div class="curveBox">
                                            <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">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $totalEarning }}<span>{{ __('admin.sar') }}</span></h2>
                                                    <div class="dot-orange mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.total_revenue') }}
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="col-md-4">
                                    <div class="curveBox">
                                        <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">
                                                <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                    {{ $totalApoointmentCount }}</h2>
                                                <div class="dot-blue mb-3"><i class="fa fa-circle"></i>
                                                    {{ __('admin.total_bookings') }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @if (auth()->user()->hasRole([app\helpers\ConstantHelper::BUSINESS_USER]))
                                    <div class="col-md-4">
                                        <div class="curveBox">
                                            <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/staffs">
                                                        <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                            {{ $staffCount }}
                                                        </h2>
                                                    </a>
                                                    <div class="dot-orange mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.total_staffs') }}
                                                    </div>

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

                                    <div class="col-md-4">
                                        <div class="curveBox">
                                            <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 href="/admin/branches">
                                                        <h2 class="dashTitle font-weight-light my-2 ml-3 text-black">
                                                            {{ $totalBranchCount }}</h2>
                                                    </a>
                                                    <div class="dot-green mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.total_branches') }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </section>
                        @if (Auth::user()->hasPermission('admin.monthly-order-counts'))
                            <section class="col-lg-8 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.business-user-earning'))
                            @if (auth()->user()->hasRole([app\helpers\ConstantHelper::BUSINESS_USER, app\helpers\ConstantHelper::INDIVIDUAL_USER]))
                                <section class="col-lg-4 connectedSortable">
                                    <div class="card">
                                        <div class="card-header border-0 pb-0">
                                            <h4 class="card-title float-none">{{ __('admin.my_earning') }}</h4>
                                            <p class="f-14">{{ __('admin.in_sar') }}</p>
                                        </div>
                                        <div class="card-body pt-0 px-0">
                                            <div id="donutChart"></div>
                                        </div>
                                    </div>
                                </section>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

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

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

    <script>
        $(document).ready(function() {
            $.get('/admin/monthly-order-counts', function(data) {
                Highcharts.chart('salechart', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: ' '
                    },
                    subtitle: {
                        text: ' '
                    },
                    xAxis: {
                        categories: data.months,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '{{ __("admin.total_booking_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:.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.bookings') }}',
                        data: data.data,
                        color: '#48a35a'

                    }]
                });
            });


        });

        // Earning Chart
        // Fetch data from Laravel controller using AJAX
        fetch('/admin/business-user-earning')
            .then(response => response.json())
            .then(data => {
                // Call a function to create/update the chart with the fetched data
                createDonutChart(data);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });

        // Function to create/update the donut chart
        function createDonutChart(chartData) {
            Highcharts.chart('donutChart', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: false,
                        alpha: 0
                    },
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                exporting: {
                    enabled: false
                },
                colors: ['#1ea0a1', '#f4a335', '#f25f84'],
                plotOptions: {
                    pie: {
                        innerSize: 160,
                        depth: 5,
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                credits: {
                    enabled: false
                },
                legend: {
                    enabled: true,
                    verticalAlign: 'bottom',
                    align: 'center',
                    y: 10
                },
                series: [{
                    name: 'In SAR',
                    data: chartData.data.map((sum, index) => [chartData.categories[index], sum])
                }]
            });
        }
    </script>
@endsection