@extends('admin.master')

@section('title')
    {{ 'Dashboard' }}
@endsection


@section('dashboard')
    <!-- / Navbar -->
    <style>
        .qr-card {
            border: 1px solid transparent;
            transition: all 0.3s ease-in-out;
        }

        .qr-card:hover {
            border: 1px solid #c7c7c7;
        }

        .image-qr {
            min-width: 100px;
            max-width: 100px;
            width: 100px;
            height: 100px;
        }

        .shadow-custom:hover {
            /* transform: scale(1.02, 1.2); */
            box-shadow: 6px 6px 5px -1px #8b89894a;
            transition: 0.3s ease-in;
        }

        .fix-height {
            min-height: 12em;
            /* max-height: 171px; */
        }

        .title-overflow {
            white-space: nowrap;
            width: 8em;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .url-overflow {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .create-qr-card {
            min-height: 12em;
            /* max-height: 15em; */
            border: 2px dashed rgb(173, 173, 173);
            background-color: transparent;
            /* min-height: 140px; */
            display: flex;
            align-items: center;
            justify-content: center
        }

        .create-qr-card:hover {
            background-color: #8b89894a;
            transition: 0.5s;
        }

        #visitorsChart,
        #activityChart {
            width: 100%;
            height: 150px;
        }

        .container-date-picker {
            display: flex;
            justify-content: flex-end;
            padding: 10px 0px 20px 0px;
        }

        .date-picker input {
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            transition: 0.3s;
        }

        .date-picker input:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .container-date-picker {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            /* Align vertically */
            padding: 10px 0px 20px 0px;
        }

        .date-picker {
            display: flex;
            gap: 10px;
        }

        .date-picker select {
            width: 180px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            transition: 0.3s;
        }

        .date-picker select:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
    </style>
    <div class="container-xxl container-p-y">

        <div class="row">
            <div class="col-lg-2 col-md-2 order-1 mb-3">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="card-title d-flex align-items-start justify-content-between mb-4">
                            <span class="badge rounded-2 bg-label-warning"><i class="bx bx-qr text-warning"
                                    style="font-size: 30px;"></i></span>
                        </div>
                        <p class="mb-1">Total QR Codes</p>
                        <h4 class="card-title">{{ totalQrCodes(auth()->guard('admin')->user()->id) }}</h4>
                        <small class="fw-medium">{{ totaldyanamicQrCodes(auth()->guard('admin')->user()->id) }}
                            Dynamic</small>
                        &nbsp;
                        <small class="fw-medium">{{ totalstaticQrCodes(auth()->guard('admin')->user()->id) }} Static</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 order-1 mb-3">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="card-title d-flex align-items-start justify-content-between mb-4">
                            <span class="badge rounded-2 bg-label-success"><i class="bx bx-scan text-success"
                                    style="font-size: 30px;"></i></span>
                        </div>
                        <p class="mb-1">Total QR Scans</p>
                        <h4 class="card-title">{{ allTimeScan(auth()->guard('admin')->user()->id) }}</h4>
                        <small class="fw-medium">{{ dynamicQrScan(auth()->guard('admin')->user()->id) }} Dynamic</small>
                        &nbsp;
                        <small class="fw-medium">{{ staticQrScan(auth()->guard('admin')->user()->id) }} Static</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 order-1 mb-3">
                <div class="card h-100">
                    <div class="card-body row g-4">
                        <div class="col-md-6 card-separator">
                            <div class="p-6">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <h5 class="mb-0">New QR Codes</h5>
                                    <small>Last Week</small>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div class="mt-auto">
                                        <h3 class="mb-1">{{ totQRPer(auth()->guard('admin')->user()->id) . '%' }}</h3>
                                    </div>
                                    <div id="visitorsChart"></div>
                                    <div class="resize-triggers">
                                        <div class="expand-trigger">
                                            <div style="width: 402px; height: 121px;"></div>
                                        </div>
                                        <div class="contract-trigger"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-6">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <h5 class="mb-0">Total Scan</h5>
                                    <small>Last Week</small>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div class="mt-auto">
                                        <h3 class="mb-1">{{ totQrScanPer(auth()->guard('admin')->user()->id) . '%' }}</h3>
                                    </div>
                                    <div id="activityChart"></div>
                                    <div class="resize-triggers">
                                        <div class="expand-trigger">
                                            <div style="width: 402px; height: 121px;"></div>
                                        </div>
                                        <div class="contract-trigger"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-date-picker">
            <div class="date-picker">
                <select class="form-select" name="qr_type" id="qr_type">
                    <option value="">Select : QR Type</option>
                    <option value="1">Dynamic</option>
                    <option value="0">Static</option>
                </select>
                <select class="form-select form-control-solid" id="years_display"></select>
            </div>
        </div>

        <div class="card">
            <div id="loader"
                style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;">
                <img src="https://i.gifer.com/4V0b.gif" alt="Loading..." width="70" height="70">
            </div>
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title m-0 me-2">Total QR</h5>
            </div>
            <div class="card-body pb-0">
                <div class="row">
                    <div class="col d-flex">
                        <div class="me-3">
                            <span class="badge rounded-2 bg-label-warning"><i class="bx bx-qr text-warning"
                                    style="font-size: 30px;"></i></span>
                        </div>
                        <div>
                            <h6 class="mb-0" id="total_qr_yearly">{{ totalQrCodes(auth()->guard('admin')->user()->id) }}
                            </h6>
                            <small>QR Codes</small>
                        </div>
                    </div>
                </div>
                <div id="totalBalanceChart"></div>
            </div>
        </div>

        <div class="card mt-3">
            <div id="loader2"
                style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;">
                <img src="https://i.gifer.com/4V0b.gif" alt="Loading..." width="70" height="70">
            </div>
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title m-0 me-2">Total QR Scans</h5>
            </div>
            <div class="card-body pb-0">
                <div class="row">
                    <div class="col d-flex">
                        <div class="me-3">
                            <span class="badge rounded-2 bg-label-success"><i class="bx bx-scan text-success"
                                    style="font-size: 30px;"></i></span>
                        </div>
                        <div>
                            <h6 class="mb-0" id="total_scan_yealy">{{ allTimeScan(auth()->guard('admin')->user()->id) }}
                            </h6>
                            <small>QR Scans</small>
                        </div>
                    </div>
                </div>
                <div id="totalIncomeChart"></div>
            </div>
        </div>
        <!-- / Content -->
    </div>
@endsection

@section('script')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // $(document).ready(function() {


        $(document).on('click', '#editbutton', function(e) {
            e.preventDefault();
            var uuid = $(this).attr('data-bs-uuid');

            var edit_url = "{{ route('admin.qr.generator', ':uuid') }}";
            var editUrl = edit_url.replace(':uuid', uuid);
            window.location.href = editUrl;

        });


        $(document).on('click', '#deletebtn', function(e) {
            e.preventDefault();

            var uuid = $(this).attr('data-bs-uuid');
            var url = "{{ route('admin.qr.delete', ':uuid') }}";
            url = url.replace(':uuid', uuid);

            Swal.fire({
                title: 'Are you sure?',
                text: "You want to delete this?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'get',
                        // data: data,
                        url: url,
                        processData: false,
                        contentType: false,

                        success: function(response) {
                            if (response.status == 200) {
                                Swal.fire(
                                    'Deleted!',
                                    'Your QR Code has been deleted.',
                                    'success'
                                ).then((result) => {
                                    if (result.isConfirmed) {
                                        location.reload()
                                    }
                                })
                            }
                        }
                    })
                }
            })
        });

        $(document).ready(function() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{ route('admin.dashboard_data') }}',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                async: true,
                dataType: "json",
                success: function(response) {
                    set_qr_data(response)
                }
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{ route('admin.dashboard_data_scan') }}',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                async: true,
                dataType: "json",
                success: function(response) {
                    set_qr_scan_data(response)
                }
            });

            let currentYear = new Date().getFullYear();
            let startYear = 2000;
            let options = '<option value=""> Select : Years </option>';

            for (let year = currentYear; year >= startYear; year--) {
                options += `<option value="${year}" ${year === currentYear ? 'selected' : ''}>${year}</option>`;
            }
            document.getElementById('years_display').innerHTML = options;
            filterQrCodes();

            function filterQrCodes() {
                let year = $('#years_display').val() || currentYear;
                let qr_type = $('#qr_type').val();

                $.ajax({
                    type: 'POST',
                    url: '{{ route('admin.dashboard_data_graph') }}',
                    data: {
                        year: year,
                        qr_type: qr_type,
                        _token: '{{ csrf_token() }}'
                    },
                    beforeSend: function() {
                        $("#loader").show();
                        $("#loader2").show();
                    },
                    success: function(response) {
                        $("#total_qr_yearly").html(response.total_qr)
                        $("#total_scan_yealy").html(response.total_qr_scan)
                        set_graph_by_years(response);
                    },
                    error: function(error) {
                        console.error('Error loading QR codes:', error);
                    }
                });
            }

            $('#years_display').on('change', function() {
                filterQrCodes();
            });

            $('#qr_type').on('change', function() {
                filterQrCodes();
            });
        });


        const chartConfig = {
            colors: {
                cardColor: '#fff',
                headingColor: '#333',
                textMuted: '#aaa',
                borderColor: '#ddd',
                primary: '#7367F0',
                success: '#28C76F',
            },
            colors_dark: {
                cardColor: '#1e1e1e',
                headingColor: '#f5f5f5',
                textMuted: '#999',
                borderColor: '#555'
            },
            colors_label: {
                primary: '#7367F0'
            }
        };
        const isDarkStyle = false;

        let t, s, o, a, r;

        if (isDarkStyle) {
            t = chartConfig.colors_dark.cardColor;
            s = chartConfig.colors_dark.headingColor;
            o = chartConfig.colors_dark.textMuted;
            r = chartConfig.colors_dark.borderColor;
            a = "dark";
        } else {
            t = chartConfig.colors.cardColor;
            s = chartConfig.colors.headingColor;
            o = chartConfig.colors.textMuted;
            r = chartConfig.colors.borderColor;
            a = "";
        }

        function set_qr_data(response) {
            var days = response.map(item => item.days_name);
            var count = response.map(item => parseFloat(item.qr_codes));

            const visitorsOptions = {
                chart: {
                    width: '100%',
                    height: 150,
                    type: 'bar',
                    toolbar: {
                        show: false
                    }
                },
                plotOptions: {
                    bar: {
                        barHeight: "30%",
                        columnWidth: "50%",
                        borderRadius: 9,
                        distributed: true
                    }
                },
                grid: {
                    show: false,
                    padding: {
                        top: -10,
                        bottom: -10
                    }
                },
                colors: response.map(value => value === 0 ?
                    chartConfig.colors_label.light :
                    chartConfig.colors.primary
                ),
                dataLabels: {
                    enabled: false
                },
                series: [{
                    data: count
                }],
                legend: {
                    show: false
                },
                xaxis: {
                    categories: days,
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        style: {
                            colors: chartConfig.colors_label.secondary,
                            fontSize: "13px"
                        }
                    }
                },
                yaxis: {
                    labels: {
                        show: false
                    }
                }
            };

            const visitorsChart = new ApexCharts(document.querySelector("#visitorsChart"), visitorsOptions);
            visitorsChart.render();
        }

        function set_qr_scan_data(response) {
            var days = response.map(item => item.days_name);
            var count = response.map(item => parseFloat(item.qr_scan));
            const activityOptions = {
                chart: {
                    width: '100%',
                    height: 150,
                    type: "area",
                    toolbar: {
                        show: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 2,
                    curve: "smooth"
                },
                series: [{
                    data: count
                }],
                colors: [chartConfig.colors.success],
                fill: {
                    type: "gradient",
                    gradient: {
                        shade: a,
                        shadeIntensity: 0.8,
                        opacityFrom: 0.8,
                        opacityTo: 0.25,
                        stops: [0, 85, 100]
                    }
                },
                grid: {
                    show: false,
                    padding: {
                        top: -20,
                        bottom: -8
                    }
                },
                legend: {
                    show: false
                },
                xaxis: {
                    categories: days,
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        style: {
                            fontSize: "13px",
                            colors: o
                        }
                    }
                },
                yaxis: {
                    labels: {
                        show: false
                    }
                }
            };
        }

        function set_graph_by_years(response) {
            const loader = document.getElementById('loader');
            const loader2 = document.getElementById('loader2');
            const chartElement = document.querySelector("#totalBalanceChart");
            const chartElement1 = document.querySelector("#totalIncomeChart");

            loader.style.display = 'block';
            loader2.style.display = 'block';

            if (!response || response.length === 0) {
                console.log("No data available for the selected year.");
                loader.style.display = 'none';
                loader2.style.display = 'none';
                return;
            }

            if (!chartElement || !chartElement1) {
                console.error("Chart elements not found.");
                loader.style.display = 'none';
                loader2.style.display = 'none';
                return;
            }

            const qr_month_names = response.qr_code_months.map(item => item.month_name);
            const count_qr = response.qr_code_months.map(item => parseFloat(item.qr_codes));
            const qr_scan_month_names = response.qr_scan_months.map(item => item.month_name);
            const count_qr_scan = response.qr_scan_months.map(item => parseFloat(item.qr_codes_scan));

            // Destroy existing charts if they exist
            if (window.qrChart instanceof ApexCharts) {
                window.qrChart.destroy();
            }
            if (window.qrScanChart instanceof ApexCharts) {
                window.qrScanChart.destroy();
            }

            // Chart 1: QR Codes
            const qrOptions = {
                series: [{
                    name: "QR Codes",
                    data: count_qr
                }],
                chart: {
                    height: 245,
                    type: "line",
                    toolbar: {
                        show: false
                    },
                    dropShadow: {
                        enabled: true,
                        top: 10,
                        left: 5,
                        blur: 3,
                        color: config.colors.warning,
                        opacity: 0.15
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 4,
                    curve: "smooth"
                },
                colors: [config.colors.warning],
                markers: {
                    size: 6,
                    colors: "transparent",
                    strokeColors: "transparent",
                    strokeWidth: 4,
                    hover: {
                        size: 9
                    }
                },
                grid: {
                    show: false,
                    padding: {
                        top: -10,
                        bottom: 10,
                        left: 0,
                        right: 0
                    }
                },
                xaxis: {
                    categories: qr_month_names,
                    labels: {
                        style: {
                            fontSize: "13px",
                            fontFamily: "Public Sans",
                            colors: o
                        }
                    }
                },
                yaxis: {
                    labels: {
                        show: false
                    }
                }
            };

            window.qrChart = new ApexCharts(chartElement, qrOptions);
            window.qrChart.render().then(() => {
                loader.style.display = 'none';
            }).catch((error) => {
                console.error('Error rendering QR chart:', error);
                loader.style.display = 'none';
            });

            // Chart 2: QR Scans
            const qrScanOptions = {
                series: [{
                    name: "QR Scans",
                    data: count_qr_scan
                }],
                chart: {
                    height: 245,
                    type: "area",
                    toolbar: {
                        show: false
                    },
                    dropShadow: {
                        enabled: true,
                        top: 14,
                        left: 2,
                        blur: 3,
                        color: config.colors.primary,
                        opacity: 0.15
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 3,
                    curve: "straight"
                },
                colors: [config.colors.primary],
                fill: {
                    type: "gradient",
                    gradient: {
                        shade: 'light',
                        shadeIntensity: 0.8,
                        opacityFrom: 0.7,
                        opacityTo: 0.25,
                        stops: [0, 95, 100]
                    }
                },
                grid: {
                    show: true,
                    strokeDashArray: 10,
                    borderColor: r,
                    padding: {
                        top: -15,
                        bottom: -10,
                        left: 0,
                        right: 0
                    }
                },
                xaxis: {
                    categories: qr_scan_month_names,
                    labels: {
                        style: {
                            colors: o,
                            fontFamily: "Public Sans",
                            fontSize: "13px"
                        }
                    }
                },
                yaxis: {
                    min: 0,
                    max: Math.max(...count_qr_scan) + 2,
                    tickAmount: 5,
                    labels: {
                        offsetX: -15,
                        formatter: (value) => value.toString(),
                        style: {
                            fontSize: "13px",
                            fontFamily: "Public Sans",
                            colors: "#6E6B7B"
                        }
                    }
                }
            };

            window.qrScanChart = new ApexCharts(chartElement1, qrScanOptions);
            window.qrScanChart.render().then(() => {
                loader2.style.display = 'none';
            }).catch((error) => {
                console.error('Error rendering QR Scan chart:', error);
                loader2.style.display = 'none';
            });
        }


        document.addEventListener("DOMContentLoaded", () => {
            const visitorsChart = new ApexCharts(document.querySelector("#visitorsChart"), visitorsOptions);
            visitorsChart.render();

            const activityChart = new ApexCharts(document.querySelector("#activityChart"), activityOptions);
            activityChart.render();

            const scanChart = new ApexCharts(document.querySelector("#totalIncomeChart"), scansOptions);
            scanChart.render();

            const totalBalanceChart = new ApexCharts(document.querySelector("#totalBalanceChart"),
                activityOptions);
            totalBalanceChart.render();
        });
    </script>
@endsection