@include('layouts.header', ['title' => 'Project Stats'])
<!-- Begin page -->
<div class="wrapper">

    @include('layouts.navbar')
    @include('layouts.sidebar')

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">

                <!-- Title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <h4 class="page-title">Project Report</h4>
                            <div class="page-title-right"></div>
                        </div>
                    </div>
                </div>

                <!-- Second Table: Project Details for Selected Agency -->
                <div class="row">
                    <div class="col-12">
                        <form method="GET" action="{{ route('admin.mis.project_stats') }}">
                            <div class="mb-3">
                                <label for="projectSelect" class="form-label">Select Project</label>
                                <select class="form-control form-select" name="project_id" id="projectSelect"
                                    onchange="this.form.submit()">
                                    <option value="">-- Select Project --</option>
                                    @foreach ($allProjects as $project)
                                        @php
                                            $encryptedId = urlencode(encrypt($project->id));
                                        @endphp
                                        <option value="{{ $encryptedId }}"
                                            {{ isset($selectedProject) && $selectedProject->id == $project->id ? 'selected' : '' }}>
                                            {{ $project->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </form>

                    </div>

                    @if ($selectedProject)
                        @php
                            $labels = collect($structureCounts)->pluck('label');
                            $counts = collect($structureCounts)->pluck('count');
                            $allotmentLabels = collect($allotmentCount)->keys(); // ['Active', 'On Hold', 'Cancel']
                            $allotmentValues = collect($allotmentCount)->values(); // [120, 35, 10]
                        @endphp
                        @if (count($structureCounts) > 0)
                            <div>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="progress status-progress">
                                            <!-- <div class="progress-bar {{ $selectedProject->status_id >= 1 ? 'bg-status-45' : 'bg-light' }}"
                                                style="width:8.33%">
                                                BSES<br>In-Progress
                                            </div> -->
                                            <div class="progress-bar {{ $selectedProject->status_id >= 2 ? 'bg-status-50' : 'bg-light' }}"
                                                style="width:8.33%">
                                                BSES<br>Completed
                                            </div>
                                            <!-- <div class="progress-bar {{ $selectedProject->status_id >= 3 ? 'bg-status-55' : 'bg-light' }}"
                                                style="width:8.33%">
                                                Joint Verification<br>Started
                                            </div>
                                            <div class="progress-bar {{ $selectedProject->status_id >= 4 ? 'bg-status-60' : 'bg-light' }}"
                                                style="width:8.33%">
                                                Joint Verification<br>In-progress
                                            </div>
                                            <div class="progress-bar {{ $selectedProject->status_id >= 5 ? 'bg-status-65' : 'bg-light' }}"
                                                style="width:8.33%">
                                                Joint Verification<br>Completed
                                            </div> -->
                                            <div class="progress-bar {{ $selectedProject->status_id >= 6 ? 'bg-status-70' : 'bg-light' }}"
                                                style="width:8.33%">
                                                Joint Verification<br>Submitted
                                            </div>
                                            <div class="progress-bar {{ $selectedProject->status_id >= 7 ? 'bg-status-75' : 'bg-light' }}"
                                                style="width:8.33%">
                                                Draft Annexure<br>Submitted
                                            </div>
                                            <div class="progress-bar {{ $selectedProject->status_id >= 8 ? 'bg-status-80' : 'bg-light' }}"
                                                style="width:8.33%">
                                                <span>Annexure - <span style="font-variant: small-caps; font-family: Georgia, serif; font-size: 1.5em;">ii</span></span>Generated
                                            </div>
                                            <!-- <div class="progress-bar {{ $selectedProject->status_id >= 9 ? 'bg-status-85' : 'bg-light' }}"
                                                style="width:8.33%">
                                                Lottery<br>Draft
                                            </div> -->
                                            <div class="progress-bar {{ $selectedProject->status_id >= 10 ? 'bg-status-90' : 'bg-light' }}"
                                                style="width:8.33%">
                                                Lottery<br>Scheduled
                                            </div>
                                            <!-- <div class="progress-bar {{ $selectedProject->status_id >= 11 ? 'bg-status-95' : 'bg-light' }}"
                                                style="width:8.33%">
                                                Lottery<br>Approved
                                            </div> -->
                                            <div class="progress-bar {{ $selectedProject->status_id >= 13 ? 'bg-status-100' : 'bg-light' }}"
                                                style="width:8.33%">
                                                Allotment Letter<br>Issued
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title">Structure Statistics</h4>
                                        <div dir="ltr">
                                            <div id="simple-pie" class="apex-charts"
                                                data-colors="#3bc0c3,#6c757d,#4489e4,#d03f3f,#edc755"></div>
                                        </div>
                                        {{-- View Details Button --}}
                                        <div class="mt-3 d-flex justify-content-between align-items-center">
                                            <h3 class="mb-0"><span class="badge text-bg-primary text-dark p-1">Total: {{ $totalStructures }}</span></h3>
                                            <a href="{{ route('admin.rnrprojectsurvey.index', ['projectId' => encrypt($selectedProject->id)]) }}"
                                                class="btn btn-success me-2">
                                                View Details
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if ($eligibleCount > 0 || $nonEligibleCount > 0)
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4 class="header-title">Eligibility Statistics</h4>
                                            <div dir="ltr">
                                                <div id="eligible-pie" class="apex-charts"></div>
                                            </div>
                                            {{-- View Details Button --}}
                                            <div class="mt-3 d-flex justify-content-between align-items-center">
                                                <h3 class="mb-0"><span class="badge text-bg-primary text-dark p-1">Total: {{ $totalEligibilityStatsCount }}</span></h3>
                                                <a href="{{ route('admin.rnrprojectsurveydraftannexuretwo.index', ['projectId' => encrypt($selectedProject->id)]) }}"
                                                    class="btn btn-success me-2">
                                                    View Details
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="col-md-6">
                                    <div class="alert alert-info">No eligibility data found for this project.</div>
                                </div>
                            @endif
                            @if (array_sum($allotmentValues->toArray()) > 0)
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4 class="header-title">Allotment Statistics</h4>
                                            <div dir="ltr">
                                                <div id="allotment-pie" class="apex-charts"></div>
                                            </div>
                                            {{-- View Details Button --}}
                                            <div class="mt-3 d-flex justify-content-between align-items-center">
                                                <h3 class="mb-0"><span class="badge text-bg-primary text-dark p-1">Total: {{ $allotmentTotalCount }}</span></h3>
                                                <a href="{{ route('admin.rnrprojectsurveydraftallotmentletter.index', ['projectId' => encrypt($selectedProject->id)]) }}"
                                                    class="btn btn-success me-2">
                                                    View Details
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="col-md-6">
                                    <div class="alert alert-info">No allotment status data found for this project.</div>
                                </div>
                            @endif

                            @if (collect($remarksCount)->sum('total') > 0)
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4 class="header-title">Joint Verification Remarks Statistics</h4>
                                            <div dir="ltr">
                                                <div id="remarks-pie" class="apex-charts"></div>
                                            </div>
                                            {{-- View Details Button --}}
                                            <div class="mt-3 d-flex justify-content-between align-items-center">
                                                <h3 class="mb-0"><span class="badge text-bg-primary text-dark p-1">Total: {{ $totalRemarksCount }}</span></h3>
                                                <a href="{{ route('admin.rnrprojectsurveylist.index', ['projectId' => encrypt($selectedProject->id)]) }}"
                                                    class="btn btn-success me-2">
                                                    View Details
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="col-md-6">
                                    <div class="alert alert-info">No verification remarks data found for this project.
                                    </div>
                                </div>
                            @endif



                            <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    
                                    var structureOptions = {
                                        series: [{
                                            data: {!! json_encode($counts) !!}
                                        }],
                                        chart: {
                                            type: 'bar',
                                            height: 350,
                                            toolbar: {
                                                show: false
                                            },
                                        },
                                        colors: [
                                            '#8FBEDC', '#A3D9A5', '#F9D56E', '#F49FB6', '#FFB785',
                                            '#F6B7C3', '#90D4E6', '#FFD36E', '#9BE7A4', '#BAA1E0',
                                            '#B9A8E3', '#7DDAD1', '#F28C82', '#A8E6CF', '#D7B9FF',
                                            '#FFABAB', '#A5BDFD', '#8ED1FC', '#F7A072', '#B6D7A8'
                                        ],
                                        plotOptions: {
                                            bar: {
                                                barHeight: '100%',
                                                distributed: true,
                                                horizontal: false,
                                                dataLabels: {
                                                    position: 'bottom'
                                                },
                                            }
                                        },
                                        dataLabels: {
                                            enabled: true,
                                        },
                                        xaxis: {
                                            categories: {!! json_encode($labels) !!},
                                            labels: {
                                                show: false
                                            }
                                        },
                                        tooltip: {
                                            x: {
                                                show: false
                                            },
                                            y: {
                                                title: {
                                                    formatter: function () {
                                                        return ''
                                                    }
                                                }
                                            }
                                        }
                                    };


                                    var structureChart = new ApexCharts(document.querySelector("#simple-pie"), structureOptions);
                                    structureChart.render();

                                    // Alootment Stat Pie Chart
                                    var allotmentPieOptions = {
                                        chart: {
                                            type: 'pie',
                                            height: 350
                                        },
                                        labels: {!! json_encode($allotmentLabels) !!},
                                        series: {!! json_encode($allotmentValues) !!},
                                        colors: [
                                            '#8FBEDC', '#F28C82', '#F9D56E', '#F49FB6', '#FFB785',
                                            '#F6B7C3', '#90D4E6', '#FFD36E', '#9BE7A4', '#BAA1E0',
                                            '#B9A8E3', '#7DDAD1', '#F28C82', '#A8E6CF', '#D7B9FF',
                                            '#FFABAB', '#A5BDFD', '#8ED1FC', '#F7A072', '#B6D7A8'
                                        ], // match status: Active, On Hold, Cancel
                                        legend: {
                                            position: 'bottom'
                                        },
                                        dataLabels: {
                                            enabled: true,
                                            formatter: function(val, opts) {
                                                return opts.w.globals.series[opts.seriesIndex];
                                            }
                                        }
                                    };

                                    var allotmentPieChart = new ApexCharts(document.querySelector("#allotment-pie"), allotmentPieOptions);
                                    allotmentPieChart.render();

                                    // Joint Verification Stat Pie Chart

                                    var remarksOptions = {
                                        chart: {
                                            type: 'pie',
                                            height: 350
                                        },
                                        labels: {!! json_encode(collect($remarksCount)->pluck('remark')) !!},
                                        series: {!! json_encode(collect($remarksCount)->pluck('total')) !!},
                                        colors: [
                                            '#8FBEDC', '#A3D9A5', '#F9D56E', '#F49FB6', '#FFB785',
                                            '#F6B7C3', '#90D4E6', '#FFD36E', '#9BE7A4', '#BAA1E0',
                                            '#B9A8E3', '#7DDAD1', '#F28C82', '#A8E6CF', '#D7B9FF',
                                            '#FFABAB', '#A5BDFD', '#8ED1FC', '#F7A072', '#B6D7A8'
                                        ],
                                        legend: {
                                            position: 'bottom'
                                        },
                                        dataLabels: {
                                            enabled: true,
                                            formatter: function(val, opts) {
                                                return opts.w.globals.series[opts.seriesIndex];
                                            }
                                        }
                                    };

                                    var remarksChart = new ApexCharts(document.querySelector("#remarks-pie"), remarksOptions);
                                    remarksChart.render();

                                    //  Eligible Stat Pie Chart (Eligible vs Non-Eligible)
                                    var ownershipOptions = {
                                        chart: {
                                            type: 'pie',
                                            height: 350
                                        },
                                        labels: ['Eligible', 'Non-Eligible', 'On Hold', 'Pending'],
                                        series: [{{ $eligibleCount ?? 0 }}, {{ $nonEligibleCount ?? 0 }}, {{ $onHoldCount ?? 0 }}, {{ $pendingEligibleCount ?? 0 }}],
                                        colors: [
                                            '#A3D9A5', '#8FBEDC', '#F9D56E', '#F49FB6', '#FFB785',
                                            '#F6B7C3', '#90D4E6', '#FFD36E', '#9BE7A4', '#BAA1E0',
                                            '#B9A8E3', '#7DDAD1', '#F28C82', '#A8E6CF', '#D7B9FF',
                                            '#FFABAB', '#A5BDFD', '#8ED1FC', '#F7A072', '#B6D7A8'
                                        ],
                                        legend: {
                                            position: 'bottom'
                                        },
                                        dataLabels: {
                                            enabled: true,
                                            formatter: function(val, opts) {
                                                return opts.w.globals.series[opts.seriesIndex];
                                            }
                                        }
                                    };

                                    var ownershipChart = new ApexCharts(document.querySelector("#eligible-pie"), ownershipOptions);
                                    ownershipChart.render();
                                });
                            </script>
                        @else
                            <div class="alert alert-info"> No records found for the selected project..</div>

                        @endif
                    @endif



                </div>

                @if ($selectedProject)
                    @php
                        $hasData =
                            count($structureCounts) > 0 ||
                            $eligibleCount > 0 ||
                            $nonEligibleCount > 0 ||
                            $tabaPavtiCount > 0 ||
                            array_sum($allotmentCount) > 0 ||
                            $reservedTenementsCount > 0;
                    @endphp

                    @if ($hasData)
                        <div class="row dashboard-style-2 counter">
                            <div class="col-xxl-3 col-sm-6">
                                <a href="{{ route('admin.selectedInventorylist.view', ['projectId' => encrypt($selectedProject->id)]) }}"
                                    class="text-decoration-none">
                                    <div class="card widget-flat text-bg-pink position-relative">
                                        <div class="card-body">
                                            <div class="float-end">
                                                <i class="ri-community-fill widget-icon"></i>
                                            </div>
                                            <h6 class="text-uppercase mt-0" title="Customers">Reserved Tenements</h6>
                                            <h2 class="my-2 counter-count">{{ $reservedTenementsCount }}</h2>
                                            <span class="stretched-link"></span>
                                        </div>
                                    </div>
                                </a>
                            </div>


                            <div class="col-xxl-3 col-sm-6">
                                <a href="{{ route('admin.rnrprojectsurveydraftallotmentletter.index', ['projectId' => encrypt($selectedProject->id)]) }}"
                                    class="text-decoration-none">
                                    <div class="card widget-flat text-bg-purple">
                                        <div class="card-body">
                                            <div class="float-end">
                                                <i class="ri-store-3-fill widget-icon"></i>
                                            </div>
                                            <h6 class="text-uppercase mt-0" title="Customers">Possesion Count</h6>
                                            <h2 class="my-2 counter-count">{{ $tabaPavtiCount }}</h2>
                                        </div>
                                    </div>
                                </a>
                            </div> <!-- end col-->

                            <div class="col-xxl-3 col-sm-6">
                                <a href="{{ route('admin.rnrprojectsurveytemporary.index', ['projectId' => encrypt($selectedProject->id)]) }}"
                                    class="text-decoration-none">
                                    <div class="card widget-flat text-bg-purple">
                                        <div class="card-body">
                                            <div class="float-end">
                                                <i class="ri-increase-decrease-line widget-icon"></i>
                                            </div>
                                            <h6 class="text-uppercase mt-0" title="Customers">Temporary Allotment</h6>
                                            <h2 class="my-2 counter-count">{{ $temporaryAllotmentCount }}</h2>
                                        </div>
                                    </div>
                                </a>
                            </div> <!-- end col-->

                            <div class="col-xxl-3 col-sm-6">
                                <a href="{{ route('admin.rnrprojectsurveydemolitionlist.index', ['projectId' => encrypt($selectedProject->id)]) }}"
                                    class="text-decoration-none">
                                    <div class="card widget-flat text-bg-purple">
                                        <div class="card-body">
                                            <div class="float-end">
                                                <i class="ri-exchange-funds-fill widget-icon"></i>
                                            </div>
                                            <h6 class="text-uppercase mt-0" title="Customers">Demolition</h6>
                                            <h2 class="my-2 counter-count">{{ $demolitionCount }}</h2>
                                        </div>
                                    </div>
                                </a>
                            </div> <!-- end col-->
                        </div>
                    @endif
                @endif


            </div> <!-- container -->
        </div> <!-- content -->
        @include('layouts.footer')
    </div>
</div>

<!-- Scripts -->
<script src="{{ asset('assets/js/vendor.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="{{ asset('assets/js/app.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable.js') }}"></script>

<script>
    document.getElementById('viewTenement').addEventListener('click', function() {
        const select = document.getElementById('tenement_stats_inventory');
        const selectedOption = select.options[select.selectedIndex];
        const url = selectedOption.getAttribute('data-url');

        if (!url) {
            alert('Please select a tenement first.');
            return;
        }

        window.location.href = url;
    });

    $('.counter-count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
</script>

</body>

</html>