@extends('admin.layouts.contentLayoutMaster')

@section('title', $title)

@section('vendor-style')
    {{-- vendor css files --}}
@endsection
@section('page-style')
    {{-- Page css files --}}
@endsection

@section('content')
    {{-- Dashboard Ecommerce Starts --}}
    <section id="dashboard-ecommerce">
        <div class="row">
            <div class="col-md-12">
                <h1 class="pb-2">Order</h1>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="card">
                    <a href="{{ URL('admin/order?status=' . TransactionStatusEnum::getString(TransactionStatusEnum::PENDING)) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-warning p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-warning font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalPendingTransactionCount }}</h2>
                            <p class="mb-1">Pending</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="card">
                    <a href="{{ URL('admin/order?status=' . TransactionStatusEnum::getString(TransactionStatusEnum::WAITING_FOR_CONFIRMATION)) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-warning p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-warning font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalWaitingForConfirmationTransactionCount }}</h2>
                            <p class="mb-1">Waiting For Confirmation</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="card">
                    <a href="{{ URL('admin/order?status=' . TransactionStatusEnum::getString(TransactionStatusEnum::APPROVED)) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-success p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-success font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalApprovedTransactionCount }}</h2>
                            <p class="mb-1">Approved</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="card">
                    <a href="{{ URL('admin/order?status=' . TransactionStatusEnum::getString(TransactionStatusEnum::REJECTED)) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-danger p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-danger font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalRejectedTransactionCount }}</h2>
                            <p class="mb-1">Rejected</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="card">
                    <a href="{{ URL('admin/order?status=' . TransactionStatusEnum::getString(TransactionStatusEnum::CANCELLED)) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-danger p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-danger font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalCancelledTransactionCount }}</h2>
                            <p class="mb-1">Cancelled</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-12 pt-2">
                <h1 class="pb-2">Reschedule Request</h1>
            </div>
            <div class="col-lg-4 col-sm-4 col-4 ">
                <div class="card">
                    <a href="{{ route("admin.booking-reschedule-request.index", ["status" => BookingRescheduleRequestStatusEnum::getString(BookingRescheduleRequestStatusEnum::PENDING)]) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-warning p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-warning font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalPendingRescheduleRequestCount }}</h2>
                            <p class="mb-1">Pending</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 col-4 ">
                <div class="card">
                    <a href="{{ route("admin.booking-reschedule-request.index", ["status" => BookingRescheduleRequestStatusEnum::getString(BookingRescheduleRequestStatusEnum::APPROVED)]) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-success p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-success font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalApprovedRescheduleRequestCount }}</h2>
                            <p class="mb-1">Approved</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 col-4 ">
                <div class="card">
                    <a href="{{ route("admin.booking-reschedule-request.index", ["status" => BookingRescheduleRequestStatusEnum::getString(BookingRescheduleRequestStatusEnum::REJECTED)]) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-danger p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-danger font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalRejectedRescheduleRequestCount }}</h2>
                            <p class="mb-1">Rejected</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-12 pt-2">
                <h1 class="pb-2">Booking</h1>
            </div>
            <div class="col-lg-4 col-sm-4 col-4 ">
                <div class="card">
                    <a href="{{ route("admin.booking.index", ["status" => BookingStatusEnum::getString(BookingStatusEnum::WAITING_FOR_ATTENDATION)]) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-warning p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-warning font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalWaitingForAttendationBookingCount }}</h2>
                            <p class="mb-1">Waiting For Attendation</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 col-4 ">
                <div class="card">
                    <a href="{{ route("admin.booking.index", ["status" => BookingStatusEnum::getString(BookingStatusEnum::ATTENDED)]) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-success p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-success font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalAttendedBookingCount }}</h2>
                            <p class="mb-1">Attended</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 col-4 ">
                <div class="card">
                    <a href="{{ route("admin.booking.index", ["status" => BookingStatusEnum::getString(BookingStatusEnum::EXPIRED)]) }}">
                        <div class="card-header d-flex flex-column align-items-start pb-0">
                            <div class="avatar bg-rgba-danger p-50 m-0">
                                <div class="avatar-content">
                                    <i class="feather icon-credit-card text-danger font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700 mt-1">{{ $totalExpiredBookingCount }}</h2>
                            <p class="mb-1">Expired</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
{{--        <div class="row">--}}
{{--            <div class="col-12">--}}
{{--                <div class="card">--}}
{{--                    <div class="card-header d-flex justify-content-between align-items-end">--}}
{{--                        <h4 class="card-title">Revenue</h4>--}}
{{--                    </div>--}}
{{--                    <div class="card-content">--}}
{{--                        <div class="card-body pb-0">--}}
{{--                            <div class="d-flex justify-content-start">--}}
{{--                                <div class="mr-2">--}}
{{--                                    <p class="mb-50 text-bold-600">This Month</p>--}}
{{--                                    <h2 class="text-bold-400">--}}
{{--                                        <sup class="font-medium-1">Rp.</sup>--}}
{{--                                        <span class="text-success">{{ GeneralHelper::transformThousandWithSeparator(GeneralHelper::pretifyAmount($totalThisMonthRevenue)) }}</span>--}}
{{--                                    </h2>--}}
{{--                                </div>--}}
{{--                                <div>--}}
{{--                                    <p class="mb-50 text-bold-600">Last Month</p>--}}
{{--                                    <h2 class="text-bold-400">--}}
{{--                                        <sup class="font-medium-1">Rp.</sup>--}}
{{--                                        <span>{{ GeneralHelper::transformThousandWithSeparator(GeneralHelper::pretifyAmount($totalLastMonthRevenue)) }}</span>--}}
{{--                                    </h2>--}}
{{--                                </div>--}}

{{--                            </div>--}}
{{--                            <div id="revenue-chart"></div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
    </section>
    {{-- Dashboard Ecommerce ends --}}
@endsection
@section('vendor-script')
    {{-- vendor files --}}
    <script src="{{ asset(mix('admin/vendors/js/charts/apexcharts.min.js')) }}"></script>
@endsection
@section('page-script')
<script>

    function formatRupiah(angka) {
        var	number_string = angka.toString(),
            sisa 	= number_string.length % 3,
            rupiah 	= number_string.substr(0, sisa),
            ribuan 	= number_string.substr(sisa).match(/\d{3}/g);

        if (ribuan) {
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }

        return "Rp. " + rupiah + ".00";
    }

    var $primary = '#7367F0';
    var $success = '#28C76F';
    var $danger = '#EA5455';
    var $warning = '#FF9F43';
    var $info = '#00cfe8';
    var $primary_light = '#A9A2F6';
    var $danger_light = '#f29292';
    var $success_light = '#55DD92';
    var $warning_light = '#ffc085';
    var $info_light = '#1fcadb';
    var $strok_color = '#b9c3cd';
    var $label_color = '#e7e7e7';
    var $white = '#fff';

    var revenueChartoptions = {
        chart: {
            height: 300,
            toolbar: { show: false },
            type: 'line',
        },
        stroke: {
            curve: 'smooth',
            dashArray: [0, 8],
            width: [4, 2],
        },
        grid: {
            borderColor: $label_color,
        },
        legend: {
            show: false,
        },
        colors: [$danger_light, $strok_color],

        fill: {
            type: 'gradient',
            gradient: {
                shade: 'dark',
                inverseColors: false,
                gradientToColors: [$primary, $strok_color],
                shadeIntensity: 1,
                type: 'horizontal',
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100, 100, 100]
            },
        },
        markers: {
            size: 0,
            hover: {
                size: 5
            }
        },
        xaxis: {
            labels: {
                style: {
                    colors: $strok_color,
                }
            },
            axisTicks: {
                show: false,
            },
            categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10'],
            axisBorder: {
                show: false,
            },
            tickPlacement: 'on',
        },
        yaxis: {
            tickAmount: 5,
            labels: {
                style: {
                    color: $strok_color,
                },
                formatter: function (val) {
                    // return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
                    return formatRupiah(val, "Rp. ");
                }
            }
        },
        tooltip: {
            x: { show: false }
        },
        series: [
            {
                name: "This Month",
                data: {!! json_encode($thisMonthRevenues) !!}
            },
            {
                name: "Last Month",
                data: {!! json_encode($lastMonthRevenues) !!}
            }
        ],

    }

    var revenueChart = new ApexCharts(
        document.querySelector("#revenue-chart"),
        revenueChartoptions
    );

    revenueChart.render();
</script>
@endsection