@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 == 0 || Auth::user()->user_type == 1)
        @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($trade+$trade_renewal+$trade_app_fee+$tax+$character+$identityCard+$unmarried+$landless+$impaired+$successor_app+$successor_sanad+$other_sanad+$succession+$building_app_payment+$building_payment+$case_payment+$family) }}</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(4000+$all_citizen+\App\Models\HoldingSurveyInfo::query()->count()) }} জন</h4>
                                    </div>
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-primary align-self-center">
                                    <span class="avatar-title">
                                        <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($all_helps) }} টি</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-server 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">মোট আয় ({{ NumToBn(substr("$fiscal_year", 0, 4)) }}-{{ NumToBn(substr("$fiscal_year", 5)) }})</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>
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-pills bg-light rounded" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#transactions-all-tab" role="tab">নোটিশ</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#transactions-buy-tab" role="tab">শিরোনাম</a>
                            </li>
                            {{--                        <li class="nav-item">--}}
                            {{--                            <a class="nav-link" data-toggle="tab" href="#transactions-sell-tab" role="tab">স্ট্যাটিক এসএমএস</a>--}}
                            {{--                        </li>--}}
                        </ul>
                        <div class="tab-content mt-4">
                            <div class="tab-pane active" id="transactions-all-tab" role="tabpanel">
                                <div class="table-responsive" data-simplebar style="max-height: 330px;">
                                    <table class="table table-centered table-nowrap">
                                        <tbody>
                                        @foreach($notices as $item)
                                            <tr>
                                                <td>{{ NumToBn($loop->iteration) }}</td>
                                                <td>{{ $item->hading }}</td>
                                                <td>{{ date('d M, Y', strtotime($item->created_at)) }}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane" id="transactions-buy-tab" role="tabpanel">
                                <div class="table-responsive" data-simplebar style="max-height: 330px;">
                                    <table class="table table-centered table-nowrap">
                                        <tbody>
                                        @foreach($titles as $item)
                                            <tr>
                                                <td>{{ NumToBn($loop->iteration) }}</td>
                                                <td>{{ $item->hading }}</td>
                                                <td>{{ date('d M, Y', strtotime($item->created_at)) }}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            {{--                        <div class="tab-pane" id="transactions-sell-tab" role="tabpanel">--}}
                            {{--                            <div class="table-responsive" data-simplebar style="max-height: 330px;">--}}
                            {{--                                <table class="table table-centered table-nowrap">--}}
                            {{--                                    <tbody>--}}
                            {{--                                    <tr>--}}
                            {{--                                        <td style="width: 50px;">--}}
                            {{--                                            <div class="font-size-22 text-primary">--}}
                            {{--                                                <i class="bx bx-down-arrow-circle"></i>--}}
                            {{--                                            </div>--}}
                            {{--                                        </td>--}}

                            {{--                                        <td>--}}
                            {{--                                            <div>--}}
                            {{--                                                <h5 class="font-size-14 mb-1">Buy BTC</h5>--}}
                            {{--                                                <p class="text-muted mb-0">14 Mar, 2020</p>--}}
                            {{--                                            </div>--}}
                            {{--                                        </td>--}}

                            {{--                                        <td>--}}
                            {{--                                            <div class="text-right">--}}
                            {{--                                                <h5 class="font-size-14 mb-0">0.016 BTC</h5>--}}
                            {{--                                            </div>--}}
                            {{--                                        </td>--}}

                            {{--                                        <td>--}}
                            {{--                                            <div class="text-right">--}}
                            {{--                                                <h5 class="font-size-14 text-muted mb-0">$125.20</h5>--}}
                            {{--                                            </div>--}}
                            {{--                                        </td>--}}
                            {{--                                    </tr>--}}
                            {{--                                    </tbody>--}}
                            {{--                                </table>--}}
                            {{--                            </div>--}}
                            {{--                        </div>--}}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="row">
            <div class="m-auto center">
                <h3 class="text-danger m-0">স্বাগতম</h3>
            </div>
        </div>
    @endif

@endsection

@section('script')
    <script>
        @if(Auth::user()->user_type == 0 || Auth::user()->user_type == 1)
        // 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", "#11007d", "#f1b44c", "#556ee6", "#f63aab", "#abd359", "#8a9bad", "#f0c2a0", "#3c1216", "#ec1c25", "#ec1c70", "#008634", "#eadde7", "#ffe599", "#1e3d59"],
                series: [
                    {
                        name: "এই মাসের আয়",
                        type: "pie",
                        radius: "55%",
                        center: ["50%", "60%"],
                        data: [
                            { value: {{ $trade_app_fee }}, name: "ট্রেড লাইসেন্স আবেদন" },
                            { value: {{ $trade }}, name: "নতুন ট্রেড লাইসেন্স" },
                            { value: {{ $trade_renewal }}, name: "ট্রেড লাইসেন্স নবায়ন" },
                            { value: {{ $tax }}, name: "হোল্ডিং ট্যাক্স" },
                            { value: {{ $character }}, name: "চারিত্রিক সনদ" },
                            { value: {{ $identityCard }}, name: "নাগরিকত্ব/পরিচয় পত্র" },
                            { value: {{ $unmarried }}, name: "অবিবাহিত সনদ" },
                            { value: {{ $landless }}, name: "ভূমিহীন সনদ" },
                            { value: {{ $successor_app }}, name: "ওয়ারিশ সনদ আবেদন" },
                            { value: {{ $successor_sanad }}, name: "ওয়ারিশ সনদ" },
                            { value: {{ $impaired }}, name: "প্রকৃত বাঁক ও শ্রবণ প্রতিবন্ধী" },
                            { value: {{ $succession }}, name: "উত্তরাধিকার সনদ" },
                            { value: {{ $family }}, name: "পারিবারিক সনদ" },
                            { value: {{ $other_sanad }}, name: "বিভিন্ন প্রত্যয়ন" },
                            { value: {{ $building_app_payment }}, name: "ইমারত নির্মাণ/পূণঃ নির্মাণ নক্সা অনুমোদনের আবেদন" },
                            { value: {{ $building_payment }}, name: "ইমারত নির্মাণ/পূণঃ নির্মাণ নক্সা অনুমোদনের কর আদায়" },
                            { value: {{ $case_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