@extends('admin.layout')
@section('main')
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">

        </div>
        <div class="content-body">
            <section id="dashboard-ecommerce">
                <div class="row match-height justify-content-end">
                    <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-auto my-auto">
                        <h2 class="m-0">Camp Dashboard<a href="" class="ml-1" data-toggle="tooltip"
                                data-placement="right" title="" data-original-title="Camp Dashboard."><i
                                    data-feather="help-circle"></i></a></h2>
                    </div>
                    <div class="col-lg-2 col-md-6 my-1">
                        <div class="form-group">
                            <select class="select2 select-label form-control w-100" id="divisionFilter" name="divisionFilter">
                                <option value="" selected>All Division</option>
                                @foreach ($divisionList as $list)
                                    <option value="{{ $list->iDivisionID }}">{{ $list->vDivision }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-6 my-1">
                        <div class="form-group">
                            <select class="select2 select-label form-control w-100" id="campFilter" name="campFilter">
                                <option value="" selected disabled>Select Camp</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-auto col-md-6 my-1">
                        <div class="form-group">
                            <div class="daterange" id="campDateFilter">
                                <i class="fa fa-calendar"></i>&nbsp;
                                <span></span> <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-auto col-md-6 my-1">
                        <div class="d-flex align-items-center">
                            <a href="#" onclick="campData()" class="btn btn-primary search_blue mr-1"><i
                                    class="fa fa-search"></i></a>
                            <a href="#" onclick="reset()" class="btn btn-danger close_red mr-1"><i
                                    class="fa fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <div class="planned_view yellow">
                            <span>Total Camps</span>
                            <div class="rank_row">
                                <div class="item">
                                    <h3 id="totalCampCount"></h3>
                                    <p>Camps</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <div class="planned_view">
                            <span>Planned</span>
                            <div class="rank_row">
                                <div class="item">
                                    <h3 id="plannedPendingCount"></h3>
                                    <p>Pending</p>
                                </div>
                                <div class="item">
                                    <h3 id="plannedApprovedCount"></h3>
                                    <p>Approved</p>
                                </div>
                                <div class="item">
                                    <h3 id="plannedRejectedCount"></h3>
                                    <p>Rejected</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <div class="planned_view purple">
                            <span>Implemented</span>
                            <div class="rank_row">
                                <div class="item">
                                    <h3 id="implementedPendingCount"></h3>
                                    <p>Pending</p>
                                </div>
                                <div class="item">
                                    <h3 id="implementedApprovedCount"></h3>
                                    <p>Approved</p>
                                </div>
                                <div class="item">
                                    <h3 id="implementedRejectedCount"></h3>
                                    <p>Rejected</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <div class="planned_view green">
                            <span>Cancelled</span>
                            <div class="rank_row">
                                <div class="item">
                                    <h3 id="cancelledCampCount"></h3>
                                    <p>Cancelled</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </section>
            <!-- Dashboard Ecommerce ends -->

            <div class="border_rs">
                <div class="row pt-1 pb-1">
                    <div class="col-lg-12">
                        <h5 class="title">Filter</h5>
                    </div>

                    <div class="col-lg-auto  col-md-6 col-sm-6 mt-auto">
                        <label class="form-label"></label>
                        <select class="select2 select-label form-control w-100" aria-label="Default select example"
                            id="campStageFilter">
                            <option value="" selected default disabled>Select Camp Stage</option>
                            <option value="1">Planned</option>
                            <option value="2">Implemented</option>
                        </select>
                    </div>

                    <div class="col-lg-auto col-md-auto  col-sm-auto col-auto mt-auto">
                        <div class="d-flex align-items-center">
                            <a href="#" onclick="setCampGraph()" class="btn btn-primary search_blue mr-1"><i
                                    class="fa fa-search"></i></a>
                            <a href="#" onclick="resetGraph()" class="btn btn-danger close_red mr-1"><i
                                    class="fa fa-times"></i></a>
                        </div>
                    </div>
                </div>
                <div class="row pt-1 pb-1">

                    <div class="col-12 col-lg-12 col-md-12">
                        <div class="white_shadow1 mb-3">
                            <div class="pb-3">
                                <div class="row">
                                    <div class="col-lg-auto col-md-auto  col-sm-auto col-auto my-auto">
                                        <h5 class="title">Camp Statistics</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="box">
                                <div id="chart"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script>
        var dateFilterStart = '';
        var dateFilterEnd = '';
        $(function() {
            var currentDate = moment();
            var fyStart = currentDate.month() >= 3 ? moment([currentDate.year(), 3, 1]) : moment([currentDate
                .year() - 1, 3, 1
            ]);
            var fyEnd = fyStart.clone().add(1, 'year').subtract(1, 'day');

            function cb(start, end) {
                $('#campDateFilter span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                updateDateRange();
            }

            $('#campDateFilter').daterangepicker({
                startDate: fyStart,
                endDate: fyEnd,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')],
                    'Financial Year': [fyStart, fyEnd]
                }
            }, cb);

            cb(fyStart, fyEnd);

            function updateDateRange() {
                var campDateRange = $("#campDateFilter span").text().split(' - ');
                dateFilterStart = campDateRange[0] ? moment(campDateRange[0], 'MMMM D, YYYY').format('YYYY-MM-DD') :
                    '';
                dateFilterEnd = campDateRange[1] ? moment(campDateRange[1], 'MMMM D, YYYY').format('YYYY-MM-DD') :
                    '';
            }
        });

        function reset() {
            $('#campFilter').val('').trigger('change');
            $('#divisionFilter').val('').trigger('change');

            var currentDate = moment();
            var fyStart = currentDate.month() >= 3 ? moment([currentDate.year(), 3, 1]) : moment([currentDate.year() - 1, 3,
                1
            ]);
            var fyEnd = fyStart.clone().add(1, 'year').subtract(1, 'day');

            $('#campDateFilter').daterangepicker({
                startDate: fyStart,
                endDate: fyEnd,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month')
                        .endOf('month')
                    ],
                    'Financial Year': [fyStart, fyEnd]
                }
            }, function(start, end) {
                $('#campDateFilter span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                dateFilterStart = start.format('YYYY-MM-DD');
                dateFilterEnd = end.format('YYYY-MM-DD');
            });

            $('#campDateFilter span').html(fyStart.format('MMMM D, YYYY') + ' - ' + fyEnd.format('MMMM D, YYYY'));

            dateFilterStart = fyStart.format('YYYY-MM-DD');
            dateFilterEnd = fyEnd.format('YYYY-MM-DD');

            campData();
            setCampGraph();
        }

        function campData() {
            var currentDate = moment();
            var fyStart = currentDate.month() >= 3 ? moment([currentDate.year(), 3, 1]) : moment([currentDate.year() - 1, 3,
                1
            ]);
            var fyEnd = fyStart.clone().add(1, 'year').subtract(1, 'day');

            var startDate = dateFilterStart || fyStart.format('YYYY-MM-DD');
            var endDate = dateFilterEnd || fyEnd.format('YYYY-MM-DD');

            $.ajax({
                url: "{{ route('admin.camp.dashboard.data') }}",
                type: "POST",
                data: {
                    iCampID: $('#campFilter option:selected').val(),
                    iDivisionID: $('#divisionFilter option:selected').val(),
                    campStartDateFilter: startDate,
                    campEndDateFilter: endDate,
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#totalCampCount').html(result.totalCampCount);
                    $('#plannedApprovedCount').html(result.plannedApprovedCount);
                    $('#plannedPendingCount').html(result.plannedPendingCount);
                    $('#plannedRejectedCount').html(result.plannedRejectedCount);
                    $('#implementedApprovedCount').html(result.implementedApprovedCount);
                    $('#implementedPendingCount').html(result.implementedPendingCount);
                    $('#implementedRejectedCount').html(result.implementedRejectedCount);
                    $('#cancelledCampCount').html(result.cancelledCampCount);
                    setCampGraph();
                }
            });
        }
        campData();
    </script>

    {{-- camp chart script --}}

    <script>
        function getMonthName(monthNumber) {
            const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
            return monthNames[monthNumber - 1];
        }

        var chartOptions = {
            series: [{
                    name: "Planned",
                    data: []
                },
                {
                    name: "Implemented",
                    data: []
                }
            ],
            colors: ["#ff8b6b", "#205781"],
            chart: {
                type: "bar",
                height: 350,
                stacked: true
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '20%'
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: 1,
                colors: ["#fff"]
            },
            xaxis: {
                categories: [],
                title: {
                    text: "Months"
                }
            },
            yaxis: {
                title: {
                    text: "Camps"
                }
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return val + " Camps";
                    }
                }
            },
            fill: {
                opacity: 1
            },
            legend: {
                position: "top",
                offsetX: 40,
                onItemHover: {
                    highlightDataSeries: false
                }
            }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
        chart.render();

        function setCampGraph() {
            var user = $('#myTeamFilter').val();
            var campStage = $('#campStageFilter').val();

            $.ajax({
                url: "{{ route('admin.get.dashboard.graph') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    user: user,
                    campStage: campStage,
                    iCampID: $('#campFilter option:selected').val(),
                    iDivisionID: $('#divisionFilter option:selected').val(),
                },
                dataType: "json",
                success: function(response) {
                    if (response) {
                        var plannedData = [];
                        var implementedData = [];
                        var labels = [];

                        response.forEach(function(record) {
                            let financialYearStart = parseInt(record.financial_year.split("-")[0]);
                            let financialYearEnd = parseInt(record.financial_year.split("-")[1]);

                            let year = record.month >= 4 ? financialYearStart : financialYearEnd;
                            let monthYear = getMonthName(record.month) + "-" + year.toString()
                                .substring(2);

                            labels.push({
                                monthYear: monthYear,
                                month: record.month,
                                year: year,
                            });
                            plannedData.push({
                                value: parseInt(record.planned),
                                month: record.month,
                                year: year,
                            });
                            implementedData.push({
                                value: parseInt(record.implemented),
                                month: record.month,
                                year: year,
                            });
                        });

                        labels.sort((a, b) => (a.year - b.year) || (a.month - b.month));
                        plannedData.sort((a, b) => (a.year - b.year) || (a.month - b.month));
                        implementedData.sort((a, b) => (a.year - b.year) || (a.month - b.month));

                        let sortedLabels = labels.map(label => label.monthYear);
                        let sortedPlannedData = plannedData.map(data => data.value);
                        let sortedImplementedData = implementedData.map(data => data.value);

                        chart.updateOptions({
                            series: [{
                                    name: "Planned",
                                    data: sortedPlannedData,
                                },
                                {
                                    name: "Implemented",
                                    data: sortedImplementedData,
                                },
                            ],
                            xaxis: {
                                categories: sortedLabels,
                            },
                            yaxis: {
                                title: {
                                    text: "Camps",
                                },
                            },
                        });
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    if (jqXHR.status == 419) {
                        $.notify("Please refresh the Page", "error");
                    } else if (jqXHR.status == 500) {
                        $.notify("Please try after a few minutes", "error");
                    } else {
                        let errorMessage = jqXHR.responseJSON && jqXHR.responseJSON.message ?
                            jqXHR.responseJSON.message :
                            "An unexpected error occurred";
                        $.notify(errorMessage, "error");
                    }
                }
            });
        }

        function resetGraph() {
            $('#myTeamFilter')
                .prop('selectedIndex', 0)
                .trigger('change');

            $('#campStageFilter')
                .val('')
                .trigger('change')
                .prop('selectedIndex', 0);

            chart.updateOptions({
                series: [{
                        name: "Planned",
                        data: []
                    },
                    {
                        name: "Implemented",
                        data: []
                    }
                ],
                xaxis: {
                    categories: []
                }
            });

            setCampGraph();
        }
        // var chart = new ApexCharts(document.querySelector("#chart"), options);
        // chart.render()

        setCampGraph();


        $(document).ready(function () {
            $('#divisionFilter').on('change', function () {
                const divisionId = $(this).val();
                $('#campFilter').empty().append('<option value="" selected disabled>Loading...</option>');

                $.ajax({
                    url: '{{ route("admin.camp.getCampsByDivision") }}',
                    type: 'GET',
                    data: { division_id: divisionId },
                    success: function (response) {
                        $('#campFilter').empty().append('<option value="" selected disabled>Select Camp</option>');

                        if (response.status === 1 && response.data.length > 0) {
                            response.data.forEach(function (camp) {
                                $('#campFilter').append(
                                    `<option value="${camp.iCampID}">${camp.vCampName}</option>`
                                );
                            });
                        } else {
                            $('#campFilter').append('<option value="" disabled>No camps found</option>');
                        }

                        $('#campFilter').select2(); // Reinitialize if needed
                    },
                    error: function () {
                        $('#campFilter').empty().append('<option value="" disabled>Error loading camps</option>');
                    }
                });
            });
        });

    </script>
@endsection