@extends('layouts.app')
@section('title', 'Home')
@section('content')
<form hidden id="homeIndexUpdate" method="GET" enctype="multipart/form-data" action="{{ route('home') }}">
    @if(Auth::user()->is_admin)
    <input type="hidden" id="homeIndexUpdate-client_id" name="client_id" value="">
    @endif
    <input type="hidden" id="homeIndexUpdate-location_id" name="location_id" value="">
    <input type="hidden" id="homeIndexUpdate-dates" name="dates" value="">
</form>

<div style="height: 100%">
    <header style="height: 4em; width: 100%;" class="d-flex flex-row justify-content-start align-items-center">
        <h1 class="fs-2 m-0 py-0 px-3" style="width: 90%">Home <strong>Dashboard</strong></h1>
        {{-- <div id="notificationDiv" style="width: 10%; height: 100%">
            <a href="#">
                <img src="{{ asset('img/icons/bell.svg') }}">
                <div id="notificationCount">{{ count($notifications) }}</div>
            </a>
        </div> --}}
    </header>
    <hr class="visible-hr m-0 p-0">

    <div class="bg-main-container dashboard d-flex flex-row justify-content-between w-100" style="height: calc(100% - 4em)">

        <div class="middle extended pt-3 px-3">

            <div class="row justify-content-between">
                <div class="col-sm-3">
                    <div class="form-group row">
                        <div class="col-sm-2 col-form-label">
                            <svg id="customer-svg"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="40"
                                height="40"
                                fill="white">

                            <title>Customer Icon</title>

                            <defs>
                                <clipPath id="circular-border">
                                <circle cx="20" cy="20" r="16" />
                                </clipPath>
                            </defs>

                            <circle id="circle_color" cx="20" cy="20" r="20" fill="black" />
                            <circle cx="20" cy="018" r="6" />
                            <circle cx="20" cy="047" r="20" clip-path="url(#circular-border)" />
                            </svg>
                        </div>
                        <div class="col-sm-10">
                            @if(auth()->user()->is_admin)
                            <select class="form-control mt-2" id="dashboard-select_client" name="dashboard-select_client">
                                @foreach($clients as $client)
                                <option value="{{ $client->id }}" {{ ($client->id == $current_client->id)?'selected':''; }}>{{ $client->first_name.' '.$client->last_name.' ('.$client->company.')' }}</option>
                                @endforeach
                            </select>
                            @else
                            <h5 class="mt-1">{{ $current_client->first_name.' '.$current_client->last_name }}</h5>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-sm-3 align-items-right">
                    <div class="form-group row pt-2">
                        <label for="dashboard-select_location" class="col-sm-3 col-form-label text-md-middle">Dates:&nbsp;</label>
                        <div class="col-sm-9">
                            <input type="text" id="selectDateRange" value="" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-sm-3 align-items-right">
                    <div class="form-group row pt-2">
                        <label for="dashboard-select_location" class="col-sm-3 col-form-label text-md-middle">Location:&nbsp;</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="dashboard-select_location" name="dashboard-select_location">
                                @foreach($locations as $location)
                                <option
                                    @if(auth()->user()->is_admin)
                                        data-client-id="{{ $location->client_id }}"
                                    @endif
                                    value="{{ $location->id }}" {{ ($location->id == $current_location->id)?'selected':''; }}>{{ $location->address }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex flex-row w-100 justify-content-between my-4">
                <div class="dashboard-indicator rounded-4 bg-accuramet-blue ff-inter p-3">
                    <h6 class="text-white "><small>DATE</small></h6>
                    <p class="text-white fw-semibold fs-5 mb-0">{{ $data['filter_from'] }} - {{ $data['filter_to'] }}</p>
                </div>

                <div class="dashboard-indicator rounded-4 bg-accuramet-gray ff-inter p-3">
                    <h6 class="text-white "><small>CUSTOMERS</small></h6>
                    <h5 class="text-white fw-semibold fs-1">{{ count($records) }}</h5>
                </div>

                <div class="dashboard-indicator rounded-4 bg-accuramet-blue ff-inter p-3">
                    <h6 class="text-white "><small>MALE</small></h6>
                    <h5 class="text-white fw-semibold fs-1">{{ $data['male'] }}</h5>
                </div>

                <div class="dashboard-indicator rounded-4 bg-accuramet-lightblue ff-inter p-3">
                    <h6 class="text-white "><small>FEMALE</small></h6>
                    <h5 class="text-white fw-semibold fs-1">{{ $data['female'] }}</h5>
                </div>

            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div id="dashboard-gender_users_hours-chart" class="chart-div rounded-4 p-3" style="width:100%;"></div>
                </div>

                <div class="col-sm-12">
                    <div id="dashboard-gender_users-chart" class="chart-div rounded-4 p-3" style="width:100%;"></div>
                </div>
                {{--
                    <div id="dashboard-total_results-chart" class="chart-div rounded-4 p-3 h-100"></div>
                --}}
            </div>

            <div class="d-flex flex-row w-100 mt-4 justify-content-between">

                <div id="dashboard-age_categories-chart" class="chart-div rounded-4 p-3"></div>
                <div id="dashboard-age_category_overview-chart" class="chart-div rounded-4 p-3"></div>

            </div>

        </div>

        <div hidden class="calendar-sidebar-right p-3" style="width: 22%; height: auto; top: 0; bottom: 0;">
            <h5 class="fw-semibold mb-4">Calendar</h5>

            <div id="calendar-month" class="d-flex flex-row justify-content-between align-items-center">
                <div id="calendar-month-prev" class="month-arrow-button"><i class="bx bxs-chevron-left"></i></div>
                <em class="fs-5" id="month-name" value></em>
                <div id="calendar-month-next" class="month-arrow-button"><i class="bx bxs-chevron-right"></i></div>
            </div>
            <table style="font-size: 9px" class="table table-borderless" id="calendar-grid">
                <thead>
                    <th>MO</th>
                    <th>TU</th>
                    <th>WE</th>
                    <th>TH</th>
                    <th>FR</th>
                    <th>SA</th>
                    <th>SU</th>
                </thead>
                <tbody>
                    <tr id="week-1" style="height: 3em;">
                        <td class="MO"></td>
                        <td class="TU"></td>
                        <td class="WE"></td>
                        <td class="TH"></td>
                        <td class="FR"></td>
                        <td class="SA"></td>
                        <td class="SU"></td>
                    </tr>
                    <tr id="week-2" style="height: 3em;">
                        <td class="MO"></td>
                        <td class="TU"></td>
                        <td class="WE"></td>
                        <td class="TH"></td>
                        <td class="FR"></td>
                        <td class="SA"></td>
                        <td class="SU"></td>
                    </tr>
                    <tr id="week-3" style="height: 3em;">
                        <td class="MO"></td>
                        <td class="TU"></td>
                        <td class="WE"></td>
                        <td class="TH"></td>
                        <td class="FR"></td>
                        <td class="SA"></td>
                        <td class="SU"></td>
                    </tr>
                    <tr id="week-4" style="height: 3em;">
                        <td class="MO"></td>
                        <td class="TU"></td>
                        <td class="WE"></td>
                        <td class="TH"></td>
                        <td class="FR"></td>
                        <td class="SA"></td>
                        <td class="SU"></td>
                    </tr>
                    <tr id="week-5" style="height: 3em;">
                        <td class="MO"></td>
                        <td class="TU"></td>
                        <td class="WE"></td>
                        <td class="TH"></td>
                        <td class="FR"></td>
                        <td class="SA"></td>
                        <td class="SU"></td>
                    </tr>
                </tbody>
            </table>
            {{-- <div class="d-flex flex-row w-100 mb-3">
                <div class="d-flex flex-column m-0 bg-warning rounded-circle" style="width: 24px; height: 24px;">
                </div>
                <div class="d-flex flex-column" style="width: 70%; margin-left: 1em;">
                    <h6 class="fw-semibold mt-0 mb-1 p-0">{{ $notification->title }}</h6>
                    <small>{{ $notification->time }}</small>
                </div>

            </div> --}}
        </div>

    </div>


</div>

<style>
:root {
    --middle-collapsed-width: 78%;
}
.bg-accuramet-gray{
    background-color: #C8CDD4;
}
.bg-accuramet-lightblue{
    background-color: #38B6FF !important;
    color: white;
}
#notificationDiv {
    position: relative;
}
#notificationDiv img {
    position: absolute;
    bottom: 22%;
    left: 35%;
}
#notificationCount {
    position: absolute;
    height: 2em;
    width: 2em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 22%;
    right: 35%;
    background: #c12;
    color: #eee;
    border-radius: 50%;
    font-size: 8pt;
    font-weight: 1000;
    margin: 0;
}
#dashboard-gender_users-chart { width: 40%; }
#dashboard-total_results-chart { width: 25%; }
#dashboard-age_categories-chart { width: 50%; }
#dashboard-age_category_overview-chart { width: 48%; }
.customer-rounded {
    border-radius: 50%;
    margin-right: 1em;
}
.dashboard-indicator {
    width: 20%;
}
.chart-div {
    background: #f2f2f7;
}

.middle {
    width: 100%;
    height: auto;
    top: 0;
    bottom: 0;
    overflow-y: scroll
}
.middle.extended, .middle.collapsed, .calendar-sidebar-right.extended, .calendar-sidebar-right.collapsed
{
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
.middle.extended {

    animation: middleGrow;
    animation-direction: normal;
}
.middle.collapsed {

    animation: middleGrow;
    animation-direction: reverse;
}
.calendar-sidebar-right.extended {
    animation: sidebarRightAppear;
    animation-direction: normal;
}
.calendar-sidebar-right.collapsed {
    animation: sidebarRightAppear;
    animation-direction: normal;
}

#calendar-grid, #calendar-grid *
{
    background: rgba(255,255,255,0) !important;
}

@keyframes middleGrow {
    from {
        width: var(--middle-collapsed-width);
    }
    to {
        width: 100%;
    }
}
@keyframes sidebarRightAppear {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.daterangepicker .calendar-table table{
    background-color: white;
}
</style>


<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script>
    $(document).ready(function(){
        $('#selectDateRange').daterangepicker({
            startDate: '{{ $data['filter_from'] }}',
            endDate: '{{ $data['filter_to'] }}',
            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')]
            }
        });

        $('#dashboard-select_location, #selectDateRange').on('change', function(){ processFilters(); })
        $('#dashboard-select_client').on('change', function(){ processFilters(true); })
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>

<script>
// import ApexCharts from 'apexcharts';
// import chartJs from 'https://cdn.jsdelivr.net/npm/chart.js@4.3.0/+esm';
let customerColors = null;
let genderUsersChart = null;

let dashboard_selectClient = document.querySelector('#dashboard-select_client') ?? '';
let dashboard_selectLocation = document.querySelector('#dashboard-select_location') ?? '';

function processFilters(exclude_location){
    $('#homeIndexUpdate-client_id').val($('#dashboard-select_client').val());
    $('#homeIndexUpdate-dates').val($('#selectDateRange').val());
 
    if (!exclude_location) {
        $('#homeIndexUpdate-location_id').val($('#dashboard-select_location').val());
    }
 
    document.querySelector('#homeIndexUpdate').submit();
}

// CHARTS
    function initDataSources() {
        customerColors = [
            "#007700", // Green
            "#770000", // Red
            "#000077" // Blue
        ];

        genderUsersChart = [];
    }

    function initHomeDashboard(customer) {
        initCharts(customer);
        refreshCustomerData(customer);
    }

    function refreshCustomerData(customer) {
        document.querySelector('#circle_color').setAttribute('fill', customerColors[customer-1]);
    }

    function initCharts(customer) {
        /*
        |--------------------------------------------------------------------------
        | Charts
        |--------------------------------------------------------------------------
        */
        /** Gender Users Chart */
            let dashboard_genderUsers_options = {
                series: [
                    {
                        name: "Female users",
                        data: [{!! $data['dates_female'] !!}],
                        color: "#38B6FF"
                    },
                    {
                        name: "Male users",
                        data: [{!! $data['dates_male'] !!}],
                        color: "#22395E"
                    }
                ],
                    chart: {
                        height: 220,
                        type: 'line',
                        zoom: {
                            enabled: false
                        },
                        fontFamily: 'Inter'
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2.5
                },
                markers: {
                    size: 2,
                    colors: "#11111177",
                    fillOpacity: 1,
                    strokeWidth: 1
                },
                title: {
                    text: 'User Genders (by date)',
                    align: 'left',
                    style: {
                        fontSize: "15px",
                        fontWeight: "700"
                    }
                },
                grid: {
                    row: {
                    colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                    opacity: 0.5
                    },
                },
                legend: {
                    fontSize: "11pt",
                    markers: {
                        width: 9,
                        height: 9,
                        strokeColor: "#11111133",
                        strokeWidth: 0.01
                    }
                },
                xaxis: {
                    categories: [{!! $data['dates'] !!}],
                    labels: {
                        style: {
                            fontSize: "8pt"
                        }
                    }
                }
            };

            document.querySelector("#dashboard-gender_users-chart").innerHTML = "";
            let dashboard_genderUsers_chart = new ApexCharts(document.querySelector("#dashboard-gender_users-chart"), dashboard_genderUsers_options);
            dashboard_genderUsers_chart.render();

        /** Gender Users by Hours Chart */
        let dashboard_genderUsersHours_options = {
                series: [
                    {
                        name: "Female users",
                        data: [{!! $data['hours_female'] !!}],
                        color: "#38B6FF"
                    },
                    {
                        name: "Male users",
                        data: [{!! $data['hours_male'] !!}],
                        color: "#22395E"
                    }
                ],
                chart: {
                    height: 220,
                    type: 'line',
                    zoom: {
                        enabled: false
                    },
                    fontFamily: 'Inter'
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2.5
                },
                markers: {
                    size: 2,
                    colors: "#11111177",
                    fillOpacity: 1,
                    strokeWidth: 1
                },
                title: {
                    text: 'User Genders (by hour)',
                    align: 'left',
                    style: {
                        fontSize: "15px",
                        fontWeight: "700"
                    }
                },
                grid: {
                    row: {
                    colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                    opacity: 0.5
                    },
                },
                legend: {
                    fontSize: "11pt",
                    markers: {
                        width: 9,
                        height: 9,
                        strokeColor: "#11111133",
                        strokeWidth: 0.01
                    }
                },
                xaxis: {
                    categories: [{!! $data['hours'] !!}],
                    labels: {
                        style: {
                            fontSize: "8pt"
                        }
                    }
                }
            };

            document.querySelector("#dashboard-gender_users_hours-chart").innerHTML = "";
            let dashboard_genderUsersHours_chart = new ApexCharts(document.querySelector("#dashboard-gender_users_hours-chart"), dashboard_genderUsersHours_options);
            dashboard_genderUsersHours_chart.render();
        /** Gender Users Chart */

        /** Age Categories Chart */
            let dashboard_ageCategories_options = {
                series: [{{ $data['18'] }}, {{ $data['18-24'] }}, {{ $data['25-34'] }}, {{ $data['35-44'] }}, {{ $data['45-54'] }}, {{ $data['55-64'] }}, {{ $data['65'] }}],
                labels: ['0-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65'],
                title: {
                    text: 'Age Categories',
                    align: 'left',
                    style: {
                        fontSize: "15px",
                        fontWeight: "700",
                    }
                },
                chart: {
                    type: 'donut',
                    fontFamily: 'Inter',
                    height: '200px',
                    toolbar: {
                        show: true
                    }
                },
                colors: ['#22395E', '#C8CDD4', '#38B6FF', '#989DC4', '#C8CDD4', '#38B6FF', '#989DC4'],
                dataLabels: {
                    enabled: false,
                    // enabledOnSeries: false
                    formatter: function(val) {
                        return val
                    }
                },
                xaxis: {
                    type: 'number',
                    formatter: function(val) {
                        return val
                    }
                },
                legend: {
                    formatter: function(seriesName, opts) {
                        return [seriesName, " -> ", opts.w.globals.series[opts.seriesIndex]]
                    }
                },
                stroke: {
                    show: false
                }
            };
            document.querySelector('#dashboard-age_categories-chart').innerHTML = "";
            let dashboard_ageCategories_chart = new ApexCharts(document.querySelector('#dashboard-age_categories-chart'), dashboard_ageCategories_options);
            dashboard_ageCategories_chart.render();
        /** Age Categories Chart */

        /** Age Category Overview Chart */
            let dashboard_ageCategoryOverview_options = {
                chart: {
                    type: 'bar',
                    fontFamily: 'Inter'
                },
                title: {
                    text: 'Age Category Overview',
                    align: 'left',
                    style: {
                        fontSize: "15px",
                        fontWeight: "700",
                    }
                },
                plotOptions: {
                    bar: {
                        borderRadius: 4,
                        columnWidth: "50%",
                        borderRadiusApplication: 'end',
                    }
                },
                dataLabels: {
                    enabled: false
                },
                series: [{
                    data: [{
                        x: '0-17',
                        y: {{ $data['18'] }},
                        fillColor: "#758399"
                    },
                    {
                        x: '18-24',
                        y: {{ $data['18-24'] }},
                        fillColor: "#22395E"
                    },
                    {
                        x: '25-34',
                        y: {{ $data['25-34'] }},
                        fillColor: "#3E4958"
                    },
                    {
                        x: '35-44',
                        y: {{ $data['35-44'] }},
                        fillColor: "#38B6FF"
                    },
                    {
                        x: '45-54',
                        y: {{ $data['45-54'] }},
                        fillColor: "#22395E"
                    },
                    {
                        x: '55-64',
                        y: {{ $data['55-64'] }},
                        fillColor: "#38B6FF"
                    },
                    {
                        x: '> 65',
                        y: {{ $data['65'] }},
                        fillColor: "#38B6FF"
                    }]
                }],
                xaxis: {
                    labels: {
                        style: {
                            fontSize: "8pt"
                        }
                    }
                }
            };

            document.querySelector('#dashboard-age_category_overview-chart').innerHTML = "";
            let dashboard_ageCategoryOverview_chart = new ApexCharts(document.querySelector('#dashboard-age_category_overview-chart'), dashboard_ageCategoryOverview_options);
            dashboard_ageCategoryOverview_chart.render();
        /** Age Category Overview Chart */

    }
// -- end charts --

// CALENDAR

// -- end calendar --

/*


*/
window.addEventListener('load', () => {
    initDataSources();
    initHomeDashboard(dashboard_selectClient.value);
});
</script>
@endsection