@extends('backend.master')
@section('title')
    পানি বিভাগ
@endsection
@section('body')
<!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">ড্যাশবোর্ড</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">ড্যাশবোর্ড</a></li>
                        <li class="breadcrumb-item active">ড্যাশবোর্ড</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    @if(Auth::user()->user_type == 4)
@php $webInfo = webInfo(); @endphp
        <div class="row">
            <div class="col-xl-4">
                <div class="card overflow-hidden">
                    <div class="bg-soft-primary">
                        <div class="row">
                            <div class="col-7">
                                <div class="text-primary p-3">
                                    <h5 class="text-primary">স্বাগতম !</h5>
                                    <p>{{ $webInfo->municipality_name }}</p>
                                </div>
                            </div>
                            <div class="col-5 align-self-end">
                                <img src="{{ asset($webInfo->circular_logo) }}" alt="" class="img-fluid">
                            </div>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="row">
                            <div class="col-sm-5">
                                <div class="avatar-md profile-user-wid mb-4">
                                    <img src="{{ Auth::user()->profile_photo_path == null  ? Auth::user()->profile_photo_url : asset(Auth::user()->profile_photo_path) }}" alt="" style="height: 100%; width: 100%" class="img-thumbnail rounded-circle">
                                </div>
                                <h5 class="font-size-15 text-truncate">{{ Auth::user()->name }}</h5>
                                <p class="text-muted mb-0 text-truncate">{{ Auth::user()->designation }}</p>
                            </div>
                            <div class="col-sm-7">
                                <div class="row pt-4">
                                    <div class="col-6">
                                        <h5 class="font-size-15">৳ {{ number_format(Auth::user()->balance, 2) }}</h5>
                                        <p class="text-muted mb-0">Personal balance</p>
                                    </div>
                                    <div class="col-6">
                                        <h5 class="font-size-15">৳ {{ number_format(Auth::user()->pending_balance, 2) }}</h5>
                                        <p class="text-muted mb-0">Pending balance</p>
                                    </div>
                                    <div class="mt-4">
                                        <a href="{{ route('profile.show') }}" class="btn btn-primary waves-effect waves-light btn-sm">View Profile <i class="mdi mdi-arrow-right ml-1"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-4">এই মাসের আয়</h4>
                        <div class="row">
                            <div class="col-sm-6">
                                <p class="text-muted">{{ NumToBnMonth(date('m')) }}</p>
                                <h3>৳ {{ NumToBn($app_pay+$connection_bill+$bill_payment) }}</h3>
                                                                    @if($set_value != '-')<p class="text-muted"><span class="text-success mr-2"> {{$persent_value}}% <i class="mdi mdi-arrow-up"></i> </span> From previous month</p>@else <p class="text-muted"><span class="text-warning mr-2"> {{$persent_value}}% <i class="mdi mdi-arrow-down"></i> </span> From previous period </p>@endif
                            </div>
                            <div class="col-sm-6">
                                <div class="mt-4 mt-sm-0">
                                    <div id="radialBar-chart" class="apex-charts"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-8">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="media">
                                    <div class="media-body">
                                        <p class="text-muted font-weight-medium">মোট গ্রাহক</p>
                                        <h4 class="mb-0">৳ {{ NumToBn($total_member) }}</h4>
                                    </div>
                                    <div class="avatar-sm rounded-circle bg-primary align-self-center mini-stat-icon">
                                    <span class="avatar-title rounded-circle bg-primary">
                                        <i class="bx bx-user font-size-24"></i>
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="media">
                                    <div class="media-body">
                                        <p class="text-muted font-weight-medium">সক্রিয় গ্রাহক</p>
                                        <h4 class="mb-0">৳ {{ NumToBn($active_member) }}</h4>
                                    </div>
                                    <div class="avatar-sm rounded-circle bg-primary align-self-center mini-stat-icon">
                                    <span class="avatar-title rounded-circle bg-primary">
                                        <i class="bx bx-user-check font-size-24"></i>
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="media">
                                    <div class="media-body">
                                        <p class="text-muted font-weight-medium">মোট আয়</p>
                                        <h4 class="mb-0">৳ {{ NumToBn($all_earning) }}</h4>
                                    </div>
                                    <div class="avatar-sm rounded-circle bg-primary align-self-center mini-stat-icon">
                                    <span class="avatar-title rounded-circle bg-primary">
                                        <i class="bx bx-money font-size-24"></i>
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">এই মাসের আয়</h4>
                                <div id="pie-chart" class="e-charts" style="height:450px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if(Auth::user()->user_type == 5)
        <div class="row">
            <div class="col-xl-4">
                <div class="card overflow-hidden">
                    <div class="bg-soft-primary">
                        <div class="row">
                            <div class="col-7">
                                <div class="text-primary p-3">
                                    <h5 class="text-primary">স্বাগতম !</h5>
                                    <p>{{ webInfo()->municipality_name }}</p>
                                </div>
                            </div>
                            <div class="col-5 align-self-end">
                                <img src="{{ asset(webInfo()->circular_logo) }}" alt="" class="img-fluid">
                            </div>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="avatar-md profile-user-wid mb-4">
                                    <img src="{{ Auth::user()->profile_photo_path == null  ? Auth::user()->profile_photo_url : asset(Auth::user()->profile_photo_path) }}" alt="" style="height: 100%; width: 100%" class="img-thumbnail rounded-circle">
                                </div>
                                <h5 class="font-size-15 text-truncate">{{ Auth::user()->name }}</h5>
                                <p class="text-muted mb-0 text-truncate">{{ Auth::user()->designation }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-8">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="media">
                                    <div class="media-body">
                                        <p class="text-muted font-weight-medium">ব্যালেন্স</p>
                                        <h4 class="mb-0">৳ {{ NumToBn(Auth::user()->balance) }}</h4>
                                    </div>
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-primary align-self-center">
                                    <span class="avatar-title">
                                        <i class="bx bx-money font-size-24"></i>
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="media">
                                    <div class="media-body">
                                        <p class="text-muted font-weight-medium">পেন্ডিং ব্যালেন্স</p>
                                        <h4 class="mb-0">৳ {{ NumToBn(Auth::user()->pending_balance) }}</h4>
                                    </div>
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-primary align-self-center">
                                    <span class="avatar-title">
                                        <i class="bx bx-money font-size-24"></i>
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div>
        </div>
    @endif
@endsection
@section('script')
    <script>
        @if(Auth::user()->user_type == 4)
        // option && "object" == typeof option && myChart.setOption(option, !0);
        (dom = document.getElementById("pie-chart")), (myChart = echarts.init(dom)), (app = {});
        (option = null),
            (option = {
                tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" },
                legend: { orient: "vertical", left: "left", data: ["আবেদন ফি", "সংযোগ ফি", "মাসিক বিল"], textStyle: { color: "#8791af" } },
                color: ["#00FF00", "#f46a6a", "#34c38f"],
                series: [
                    {
                        name: "এই মাসের আয়",
                        type: "pie",
                        radius: "55%",
                        center: ["50%", "60%"],
                        data: [
                            { value: {{ $app_pay }}, name: "আবেদন ফি" },
                            { value: {{ $connection_bill }}, name: "সংযোগ ফি" },
                            { value: {{ $bill_payment }}, name: "মাসিক বিল" },
                        ],
                        itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } },
                    },
                ],
            }),
        option && "object" == typeof option && myChart.setOption(option, !0);

        options = {
            chart: { height: 180, type: "radialBar", offsetY: -10 },
            plotOptions: {
                radialBar: {
                    startAngle: -135,
                    endAngle: 135,
                    dataLabels: {
                        name: { fontSize: "13px", color: void 0, offsetY: 60 },
                        value: {
                            offsetY: 22,
                            fontSize: "16px",
                            color: void 0,
                            formatter: function (e) {
                                return e + "%";
                            },
                        },
                    },
                },
            },
            colors: ["#556ee6"],
            fill: { type: "gradient", gradient: { shade: "dark", shadeIntensity: 0.15, inverseColors: !1, opacityFrom: 1, opacityTo: 1, stops: [0, 50, 65, 91] } },
            stroke: { dashArray: 4 },
            series: [0],
            labels: ["Series A"],
        };
        (chart = new ApexCharts(document.querySelector("#radialBar-chart"), options)).render();
        @endif
    </script>
@endsection