@extends('layouts.app')

@section('title', 'Dashboard')

@section('page-wrapper')
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Dashboard ({{ Auth::user()->name }})
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-fluid">
            <div class="row row-deck row-cards">
                <div class="col-12">
                    <div class="row row-deck row-cards">

                        <div class="col-6 col-md-4 col-xl-4">
                            <a href="{{ route('bookings.index', ['date' => \Carbon\Carbon::now()->format('d')]) }}"
                                class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-booking">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path
                                                        d="M4 18v-9.5a4.5 4.5 0 0 1 4.5 -4.5h7a4.5 4.5 0 0 1 4.5 4.5v7a4.5 4.5 0 0 1 -4.5 4.5h-9.5a2 2 0 0 1 -2 -2z" />
                                                    <path
                                                        d="M8 12h3.5a2 2 0 1 1 0 4h-3.5v-7a1 1 0 0 1 1 -1h1.5a2 2 0 1 1 0 4h-1.5" />
                                                    <path d="M16 16l.01 0" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold">{{ $today_booking }}</div>
                                            <div class="text-secondary">Today's <br />Booking </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-6 col-md-4 col-xl-4">
                            <a href="{{ route('bookings.index', ['month' => \Carbon\Carbon::now()->format('Y-m')]) }}"
                                class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-booking">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path
                                                        d="M4 18v-9.5a4.5 4.5 0 0 1 4.5 -4.5h7a4.5 4.5 0 0 1 4.5 4.5v7a4.5 4.5 0 0 1 -4.5 4.5h-9.5a2 2 0 0 1 -2 -2z" />
                                                    <path
                                                        d="M8 12h3.5a2 2 0 1 1 0 4h-3.5v-7a1 1 0 0 1 1 -1h1.5a2 2 0 1 1 0 4h-1.5" />
                                                    <path d="M16 16l.01 0" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold">{{ $month_booking }}</div>
                                            <div class="text-secondary">{{ \Carbon\Carbon::now()->format("M'y") }} Month
                                                <br />Booking
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        {{-- <div class="col-6 col-md-3 col-xl-3">
                            <a href="{{ route('franchises.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-git-branch">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M7 8l0 8" />
                                                    <path d="M9 18h6a2 2 0 0 0 2 -2v-5" />
                                                    <path d="M14 14l3 -3l3 3" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold"><span
                                                    class="text-success">{{ $franchises_active_count }}</span> / <span
                                                    class="text-danger">{{ $franchises_inactive_count }}</span></div>
                                            <div class="text-secondary">Franchise</div>
                                            <div class="small text-muted">Active / Inactive</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div> --}}

                        <div class="col-6 col-md-4 col-xl-4">
                            <a href="{{ route('support-tickets.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-headset">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M4 14v-3a8 8 0 1 1 16 0v3" />
                                                    <path d="M18 19c0 1.657 -2.686 3 -6 3" />
                                                    <path
                                                        d="M4 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
                                                    <path
                                                        d="M15 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold">
                                                <span class="text-danger">{{ $ticket_open_count }}</span> / 
                                                <span class="text-success">{{ $ticket_closed_count }}</span>
                                            </div>
                                            <div class="text-secondary">Tickets</div>
                                            <div class="small text-muted">Open / Closed</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                {{-- @php
                    $currentYear = now()->year;
                    $startYear = 2025;
                @endphp

                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="card-title">Franchise Income</h3>
                                <div class="ms-auto">
                                    <div id="franchise-revenue-filter-dropdown" class="dropdown">
                                        <a class="dropdown-toggle text-secondary" id="franchise-revenue-dropdown"
                                            href="javascript:void(0)" data-bs-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false"
                                            aria-label="Select year for revenue data">{{ $currentYear }}</a>
                                        <div class="dropdown-menu dropdown-menu-end"
                                            aria-labelledby="franchise-revenue-dropdown" style="">
                                            @for ($year = $currentYear; $year >= $startYear; $year--)
                                                <a class="dropdown-item {{ $year == $currentYear ? 'active' : '' }}"
                                                    data-year="{{ $year }}" href="javascript:void(0)">
                                                    {{ $year }}
                                                </a>
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="franchise-chart-wrapper" style="position:relative;">

                                <div id="franchise-chart-loader"
                                    style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);">
                                    <div class="spinner-border text-primary" role="status"></div>
                                </div>
                                <div id="franchise-revenue-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="card-title">Admin Income</h3>
                                <div class="ms-auto">
                                    <div id="admin-revenue-filter-dropdown" class="dropdown">
                                        <a class="dropdown-toggle text-secondary" id="admin-revenue-dropdown"
                                            href="javascript::void(0)" data-bs-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false"
                                            aria-label="Select time range for revenue data">{{ $currentYear }}</a>
                                        <div class="dropdown-menu dropdown-menu-end"
                                            aria-labelledby="admin-revenue-dropdown" style="">
                                            @for ($year = $currentYear; $year >= $startYear; $year--)
                                                <a class="dropdown-item {{ $year == $currentYear ? 'active' : '' }}"
                                                    data-year="{{ $year }}" href="javascript:void(0)">
                                                    {{ $year }}
                                                </a>
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="admin-chart-wrapper" style="position:relative;">

                                <div id="admin-revenue-chart-loader"
                                    style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);">
                                    <div class="spinner-border text-primary" role="status"></div>
                                </div>
                                <div id="admin-revenue-chart"></div>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </div>
@endsection

{{-- @section('scripts')
    <script>
        // Franchise Revenue
        document.addEventListener("DOMContentLoaded", function() {
            let franchiseChart;
            const franchiseLoader = document.getElementById('franchise-chart-loader');
            const chartDiv = document.getElementById('franchise-revenue-chart');
            const currentYear = {{ now()->year }};

            function renderChart(data) {
                if (franchiseChart) {
                    franchiseChart.updateOptions({
                        series: data.series,
                        xaxis: {
                            categories: data.categories
                        }
                    });
                    return;
                }

                franchiseChart = new ApexCharts(chartDiv, {
                    chart: {
                        type: "line",
                        height: 340,
                        parentHeightOffset: 0,
                        toolbar: {
                            show: false
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    fill: {
                        opacity: 1,
                    },
                    stroke: {
                        width: 2,
                        lineCap: "round",
                        curve: "smooth"
                    },
                    series: data.series,
                    tooltip: {
                        theme: 'dark',
                    },
                    grid: {
                        padding: {
                            top: -20,
                            right: 0,
                            left: -4,
                            bottom: -4
                        },
                        strokeDashArray: 4
                    },
                    xaxis: {
                        categories: data.categories,
                        labels: {
                            rotate: -45,
                            padding: 0,
                        }
                    },
                    yaxis: {
                        labels: {
                            padding: 4
                        }
                    },
                    // colors: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728'],
                    legend: {
                        show: true
                    }
                });

                franchiseChart.render();
            }

            function fetchChartData(year) {
                franchiseLoader.style.display = 'block';
                fetch(`{{ route('franchise.revenue.data') }}?year=${year}`)
                    .then(response => response.json())
                    .then(data => {
                        renderChart(data);
                        franchiseLoader.style.display = 'none';
                    });
            }

            // Default Load
            fetchChartData(currentYear);

            // Filter Change
            document.querySelectorAll('#franchise-revenue-filter-dropdown .dropdown-item').forEach(item => {
                item.addEventListener('click', function() {
                    document.querySelectorAll('#franchise-revenue-filter-dropdown .dropdown-item')
                        .forEach(el => el.classList.remove('active'));
                    this.classList.add('active');
                    document.getElementById('franchise-revenue-dropdown').textContent = this
                        .textContent;
                    fetchChartData(this.dataset.year);
                });
            });
        });

        // Admin Revenue
        let adminRevenueChart = null;

        function renderAdminRevenueChart(categories, seriesData) {
            const options = {
                chart: {
                    type: "area",
                    fontFamily: 'inherit',
                    height: 340,
                    toolbar: {
                        show: false
                    },
                    animations: {
                        enabled: false
                    },
                },
                dataLabels: {
                    enabled: false
                },
                fill: {
                    opacity: .16,
                    type: 'solid'
                },
                stroke: {
                    width: 2,
                    lineCap: "round",
                    curve: "smooth",
                },
                series: [{
                    name: "Income",
                    data: seriesData
                }],
                tooltip: {
                    theme: 'dark'
                },
                grid: {
                    padding: {
                        top: -20,
                        right: 0,
                        left: -4,
                        bottom: -4
                    },
                    strokeDashArray: 4,
                },
                xaxis: {
                    categories: categories,
                    labels: {
                        padding: 0
                    },
                    tooltip: {
                        enabled: false
                    },
                    axisBorder: {
                        show: false
                    },
                },
                yaxis: {
                    labels: {
                        padding: 4
                    },
                },
                colors: [tabler.getColor("primary")],
                legend: {
                    show: false
                },
            };

            if (adminRevenueChart) {
                adminRevenueChart.updateOptions(options);
            } else {
                adminRevenueChart = new ApexCharts(document.getElementById('admin-revenue-chart'), options);
                adminRevenueChart.render();
            }
        }

        function fetchAdminRevenueData(year) {
            const loader = document.getElementById('admin-revenue-chart-loader');
            loader.style.display = 'block';

            fetch(`{{ route('admin.dashboard.revenue') }}?year=${year}`)
                .then(response => response.json())
                .then(data => {
                    renderAdminRevenueChart(data.categories, data.series);
                    loader.style.display = 'none';
                }).catch(error => {
                    console.error("Error fetching revenue data:", error);
                    loader.style.display = 'none';
                });
        }

        document.addEventListener("DOMContentLoaded", function() {
            const currentYear = {{ now()->year }};
            fetchAdminRevenueData(currentYear);

            // Dropdown year click handler
            document.querySelectorAll('#admin-revenue-filter-dropdown .dropdown-item').forEach(item => {
                item.addEventListener('click', function() {
                    document.querySelectorAll('#admin-revenue-filter-dropdown .dropdown-item')
                        .forEach(i => i.classList.remove('active'));
                    this.classList.add('active');

                    const selectedYear = this.getAttribute('data-year');
                    fetchAdminRevenueData(selectedYear);
                });
            });
        });
    </script>
@endsection --}}