@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 == 3)
        <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 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($this_month_earning) }}</h3>
                                    @php
                                        $new_month_total = $this_month_earning;
                                        $month_defirent = abs($new_month_total-$last_month_earning);
                                        $set_value = ($last_month_earning > $new_month_total) ? '-' : '';
                                        $persent_value = $new_month_total == 0 ? 0 : floor(($month_defirent/$new_month_total)*100);
                                        if ($set_value != '-')
                                        {
                                            $bar_color = '#556ee6';
                                        }
                                        else {
                                            $bar_color = '#f1b44c';
                                        }
                                    @endphp
                                @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="earning-chart" class="apex-charts"></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($this_month_cost) }}</h3>
                                @php
                                    $new_month_total_cost = $this_month_cost;
                                    $month_defirent_for_cost = abs($new_month_total_cost-$last_month_cost);
                                    $set_value_for_cost = ($last_month_cost > $new_month_total_cost) ? '-' : '';
                                    $persent_value_for_cost = $new_month_total_cost == 0 ? 0 : floor(($month_defirent_for_cost/$new_month_total_cost)*100);
                                    if ($set_value_for_cost != '-')
                                    {
                                        $bar_color_for_cost = '#556ee6';
                                    }
                                    else {
                                        $bar_color_for_cost = '#f1b44c';
                                    }
                                @endphp
                                @if($set_value_for_cost != '-')<p class="text-muted"><span class="text-success mr-2"> {{$persent_value_for_cost}}% <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_for_cost}}% <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="cost-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($current_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($total_earning) }}</h4>
                                    </div>
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-primary align-self-center">
                                    <span class="avatar-title">
                                        <i class="bx bx-plus-circle 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($total_cost) }}</h4>
                                    </div>
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-primary align-self-center">
                                    <span class="avatar-title">
                                        <i class="bx bx-minus-circle 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"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <h4>সর্বশেষ ট্রানজেকশন</h4>
                        <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">Pending</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#transactions-buy-tab" role="tab">Approved</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#transactions-sell-tab" role="tab">reject</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">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>চালান নম্বার</th>
                                            <th>খাত</th>
                                            <th>তারিখ</th>
                                            <th>পরিমান</th>
                                            <th>প্রদানকারী</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($pending_submissions as $key => $item)
                                            <tr>
                                                <td>{{ '1' }}</td>
                                                <td>{{ $item->calan_no }}</td>
                                                <td>@if($item->income_sector_id == 1) ট্রেড লাইসেন্স @elseif($item->income_sector_id == 2) হোল্ডিং ট্যাক্স @elseif($item->income_sector_id == 3) চারিত্রিক সনদ @elseif($item->income_sector_id == 4) নাগরিকত্ব/পরিচয় পত্র @elseif($item->income_sector_id == 5) অবিবাহিত সনদ @elseif($item->income_sector_id == 6) ভূমিহীন সনদ @elseif($item->income_sector_id == 7) ওয়ারিশ সনদ @elseif($item->income_sector_id == 8) প্রকৃত বাঁক ও শ্রবণ প্রতিবন্ধী @elseif($item->income_sector_id == 9) বিভিন্ন প্রত্যয়ন @elseif($item->income_sector_id == 10) উত্তরাধিকার সনদ  @elseif($item->income_sector_id == 11) ইমারত নির্মাণ/পূণঃ নির্মাণ @elseif($item->income_sector_id == 12) বিচার-সালিশ ফি @endif</td>
                                                <td class="text-center">{{ date('d M, Y', strtotime($item->from_date)) }}
                                                    <br/>
                                                    To
                                                    <br/>
                                                    {{ date('d M, Y', strtotime($item->to_date)) }}</td>
                                                <td>{{ number_format($item->amount, 2) }}</td>
                                                <td>{{ $item->user?->name }}</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">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>চালান নম্বার</th>
                                            <th>খাত</th>
                                            <th>তারিখ</th>
                                            <th>পরিমান</th>
                                            <th>প্রদানকারী</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($approve_submissions as $key => $item)
                                            <tr>
                                                <td>{{ '1' }}</td>
                                                <td>{{ $item->calan_no }}</td>
                                                <td>@if($item->income_sector_id == 1) ট্রেড লাইসেন্স @elseif($item->income_sector_id == 2) হোল্ডিং ট্যাক্স @elseif($item->income_sector_id == 3) চারিত্রিক সনদ @elseif($item->income_sector_id == 4) নাগরিকত্ব/পরিচয় পত্র @elseif($item->income_sector_id == 5) অবিবাহিত সনদ @elseif($item->income_sector_id == 6) ভূমিহীন সনদ @elseif($item->income_sector_id == 7) ওয়ারিশ সনদ @elseif($item->income_sector_id == 8) প্রকৃত বাঁক ও শ্রবণ প্রতিবন্ধী @elseif($item->income_sector_id == 9) বিভিন্ন প্রত্যয়ন @elseif($item->income_sector_id == 10) উত্তরাধিকার সনদ  @elseif($item->income_sector_id == 11) ইমারত নির্মাণ/পূণঃ নির্মাণ @elseif($item->income_sector_id == 12) বিচার-সালিশ ফি @endif</td>
                                                <td class="text-center">{{ date('d M, Y', strtotime($item->from_date)) }}
                                                    <br/>
                                                    To
                                                    <br/>
                                                    {{ date('d M, Y', strtotime($item->to_date)) }}</td>
                                                <td>{{ number_format($item->amount, 2) }}</td>
                                                <td>{{ $item->user?->name }}</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">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>চালান নম্বার</th>
                                            <th>খাত</th>
                                            <th>তারিখ</th>
                                            <th>পরিমান</th>
                                            <th>প্রদানকারী</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($reject_submissions as $key => $item)
                                            <tr>
                                                <td>{{ '1' }}</td>
                                                <td>{{ $item->calan_no }}</td>
                                                <td>@if($item->income_sector_id == 1) ট্রেড লাইসেন্স @elseif($item->income_sector_id == 2) হোল্ডিং ট্যাক্স @elseif($item->income_sector_id == 3) চারিত্রিক সনদ @elseif($item->income_sector_id == 4) নাগরিকত্ব/পরিচয় পত্র @elseif($item->income_sector_id == 5) অবিবাহিত সনদ @elseif($item->income_sector_id == 6) ভূমিহীন সনদ @elseif($item->income_sector_id == 7) ওয়ারিশ সনদ @elseif($item->income_sector_id == 8) প্রকৃত বাঁক ও শ্রবণ প্রতিবন্ধী @elseif($item->income_sector_id == 9) বিভিন্ন প্রত্যয়ন @elseif($item->income_sector_id == 10) উত্তরাধিকার সনদ  @elseif($item->income_sector_id == 11) ইমারত নির্মাণ/পূণঃ নির্মাণ @elseif($item->income_sector_id == 12) বিচার-সালিশ ফি @endif</td>
                                                <td class="text-center">{{ date('d M, Y', strtotime($item->from_date)) }}
                                                    <br/>
                                                    To
                                                    <br/>
                                                    {{ date('d M, Y', strtotime($item->to_date)) }}</td>
                                                <td>{{ number_format($item->amount, 2) }}</td>
                                                <td>{{ $item->user?->name }}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection

@section('script')
    <script>
        @if(Auth::user()->user_type == 3)
        // 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: ["#4b62cd", "#24ade3"],
                series: [
                    {
                        name: "এই মাসের আয় ও ব্যায়",
                        type: "pie",
                        radius: "55%",
                        center: ["50%", "60%"],
                        data: [
                            { value: {{ $this_month_earning }}, name: "আয়" },
                            { value: {{ $this_month_cost }}, 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: [""],
            fill: { type: "gradient", gradient: { shade: "dark", shadeIntensity: 0.15, inverseColors: !1, opacityFrom: 1, opacityTo: 1, stops: [0, 50, 65, 91] } },
            stroke: { dashArray: 4 },
            series: [],
            labels: ["Series A"],
        };
        (chart = new ApexCharts(document.querySelector("#earning-chart"), options)).render();
        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: [""],
            fill: { type: "gradient", gradient: { shade: "dark", shadeIntensity: 0.15, inverseColors: !1, opacityFrom: 1, opacityTo: 1, stops: [0, 50, 65, 91] } },
            stroke: { dashArray: 4 },
            series: [],
            labels: ["Series A"],
        };
        (chart = new ApexCharts(document.querySelector("#cost-chart"), options)).render();
        @endif
    </script>
@endsection