@extends('layout.maincontant')

@section('page-to-tittle')
<h6 class="float-start m-0 them-fs-2">Overview</h6>
@endsection

@section('main-content-top-nav-btn')
<style>
    .custom-dropdown {
        position: relative;
        display: inline-block;
    }

    .custom-dropdown select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: none;
        background: transparent;
        padding: 5px 30px 5px 15px;
        font-size: 16px;
        font-weight: bold;
        color: #007bff;
        cursor: pointer;
    }

    .custom-dropdown::before {
        content: "\f124";
        /* FontAwesome icon unicode */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #007bff;
    }


    .custom-dropdown select:focus {
        outline: none;
    }

    .custom-dropdown {
        border: 1px solid #007bff;
        border-radius: 4px;
        background-color: #f1f7fe;
        /* padding: 5px 15px; */
    }

    .custom-dropdownroles {
        position: relative;
        display: inline-block;
    }

    .custom-dropdownroles select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: none;
        background: #fff9ea;
        padding: 5px 30px 5px 15px;
        font-size: 16px;
        font-weight: bold;
        color: #e1994d;
        cursor: pointer;
    }

    .custom-dropdownroles::before {
        content: "\f007";
        /* FontAwesome icon unicode */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #e1994d;
    }


    .custom-dropdownroles select:focus {
        outline: none;
    }

    .custom-dropdownroles {
        border: 1px solid #e1994d;
        border-radius: 4px;
        background-color: #fff9ea;
        /* padding: 5px 15px; */
    }

   .equal-height {
    display: flex;
    flex-wrap: wrap;
}

.colbox {
    display: flex;
    flex-direction: column;
}

.colbox .row.m-1 {
    flex-grow: 1;
}
</style>


<div class="row mt-1">
    <div class="col d-flex  px-2">


        <div class="custom-dropdown ">
            <select class="custom-select them-fs-3" id="inputGroupSelect02">
                @if($loc->isEmpty())
                <option value="" selected><i class="fa-solid fa-location-arrow "></i> Location</option>
                @else
                @php
                $sessionLocationId = session('location_id');
                @endphp
                @foreach ($loc as $loct)
                <option value="{{ $loct->id }}" {{ $sessionLocationId == $loct->id ? 'selected' : '' }}>
                    {{ ($loct->location) }}
                </option>
                @endforeach
                @endif
            </select>
        </div>

    </div>



</div>
@endsection
@section('main-content')
<div class="row ">

    <div class="col-md-12 p-2  mb-2">
        <style>
            .overview-nav-tab-top>.nav-item>.nav-link {
                border: 0px;

            }

            .overview-nav-tab-top>.nav-item>.active {
                border: 0px;
                color: #ffffff;
                background-color: #52050A;
                border-radius: 5px;
                font-weight: 500;
            }

            .overview-nav-tab-top {
                border: 0px;
            }

            .overview-card-nav-tab>li>button {
                color: black;

            }
            .overview-nav-tab-top>li>button {
                color: black;
                font-size: 15px;

            }

            .overview-card-nav-tab>li>.active {
                color: black !important;
                background-color: #ffffff !important;
                border-bottom: 3px solid #52050a;
                border-radius: 0px;
            }

            .overview-card-nav-tab>li>button>p {
                color: #ffffff !important;
                background-color: #a4656d !important;
                border-radius: 50%;
                width: 22px;
                height: 22px;
                text-align: center;
                font-size: 14px;
                margin: auto 5px;
            }

            .overview-card-nav-tab>li>button {
                display: flex;
            }

            .visitors-table-name {
                color: #52050a;
            }

            .weekly-table-name {
                color: #b8b8b8;
            }

            .visitors-table-badge {
                background-color: #f5e3e3;
                color: #52050A;
            }

            .borderless-table td,
            .borderless-table th {
                border: none;
            }
        </style>
        <div>
            <ul style="    width: fit-content;" class="nav nav-tabs bg-white rounded p-2 overview-nav-tab-top  " id="overviewnavtabtop" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="today-tab" data-bs-toggle="tab" data-bs-target="#today" type="button" role="tab" aria-controls="today" aria-selected="true">Today</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="weekly-tab" data-bs-toggle="tab" data-bs-target="#weekly" type="button" role="tab" aria-controls="weekly" aria-selected="false" tabindex="-1">Weekly</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="monthly-tab" data-bs-toggle="tab" data-bs-target="#monthly" type="button" role="tab" aria-controls="monthly" aria-selected="false" tabindex="-1">Monthly</button>
                </li>
            </ul>
        </div>

    </div>

    <div class="tab-content col-md-12 p-0 m-0 " id="myTabContent ">
    <div class="tab-pane fade show active m-0 p-0" id="today" role="tabpanel" aria-labelledby="today-tab">
    <div class="row m-0 equal-height">
        <div class="col-md-4 h-100 col-sm-12 col-12 px-1 colbox">
            <div style="background-color:#ffefd9" class="row m-1 rounded h-100">
                <div class="col-md-12 p-3 pt-4">
                    <div style="background-color:#e7c79b;height: 43px;width: 43px;" class="p-2 rounded">
                        <i class="fa-solid fa-users pt-1 fs-5 pt-1"></i>
                    </div>
                </div>
                <div class="col-md-12 d-flex align-items-center justify-content-between">
                    <span class='px-1 font-weight-bold fw-6 them-fs-2'>
                        Visitors Waiting
                    </span>
                    <span class='px-1 them-fs-3' id="visitor_waiting">
                        Visitors Waiting
                    </span>
                </div>
                <div class="col-md-12 d-flex align-items-center  justify-content-between">
                    <span class='px-1 font-weight-bold fw-6 them-fs-1 visitor_count' id="visitor_count">
                    </span>
                    <span class=''>
                    </span>
                </div>
                <div class="col-md-12 p-0 m-0 bg-white mt-3" id="filter" style="text-align:center;height: 35vh;overflow-y: scroll;">
                    <div class="spinner-border text-info" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 h-100 col-sm-12 col-12 px-1 colbox">
            <div style="background-color:#d9e8ff" class="row m-1 rounded h-100">
                <div class="col-md-12 p-3 pt-4">
                    <div style='background-color:#acc9f7;height: 43px;width: 43px;' class='p-2 rounded'>
                        <i class="fa-solid fa-users pt-1 fs-5"></i>
                    </div>
                </div>
                <div class="col-md-12 d-flex align-items-center justify-content-between">
                    <span class='px-1 font-weight-bold fw-6 them-fs-2'>
                        Clerks Busy
                    </span>
                    <span class='px-1 them-fs-3' id="clerk_visitng">
                        <!-- 1 Clerk out of1 serving Visiter -->
                    </span>
                </div>
                <div class="col-md-12 d-flex align-items-center justify-content-between">
                    <span class='px-1 font-weight-bold fw-6 them-fs-1 visitor_count'>
                    </span>
                    <span class=''>
                    </span>
                </div>
                <div class="col-md-12 p-0 m-0 bg-white mt-3" id="filter" style="text-align:center;height: 35vh;overflow-y: scroll;">
                    <div class="spinner-border text-info" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 h-100 col-sm-12 col-12 px-1 colbox">
            <div style="background-color:#dbd9ff" class="row m-1 rounded h-100">
                <div class="col-md-12 p-3 pt-4">
                    <div style='background-color:#928cf4;height: 43px;width: 43px;' class='p-2 rounded'>
                        <i class="fa-solid fa-users pt-1 fs-5"></i>
                    </div>
                </div>
                <div class="col-md-12 d-flex align-items-center justify-content-between">
                    <span class='px-1 font-weight-bold fw-6 them-fs-2'>
                        Visitors Served
                    </span>
                    <span class='px-1 them-fs-3' id="completed">
                        2 Service Complete
                    </span>
                </div>
                <div class="col-md-12 d-flex align-items-center justify-content-between">
                    <span class='px-1 font-weight-bold fw-6 them-fs-1 visitor_count'>
                    </span>
                    <span class=''>
                    </span>
                </div>
                <div class="col-md-12 p-0 m-0 bg-white mt-3" id="filter" style="text-align:center;height: 35vh;overflow-y: scroll;">
                    <div class="spinner-border text-info" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        <div class="tab-pane fade removeshow show active m-0 p-0" id="weekly" role="tabpanel" aria-labelledby="weekly-tab">
            <div class="row  m-0">
                <div class="col-md-10 col-sm-10 col-12 px-2  ">
                    <div class="bg-white rounded px-3">
                        <h4 class="px-3 py-3">
                            Performance
                        </h4>
                        <table class="table borderless-table ">
                            <tbody>
                                <tr>
                                    <td scope="col fw-6">
                                        <p class="p-0 m-0 weekly-table-name fs-30 fw-6" id="week_visitor"></p>
                                        <p class="p-0 m-0 text-secondary fs-12"> <span class=" fw-6 fs-16 text-black">Visitor</span></p>
                                    </td>
                                    <td scope="col">
                                        <p class="p-0 m-0 weekly-table-name fs-30 fw-6" id="week_waiting"></p>
                                        <p class="p-0 m-0 text-secondary fs-12"> <span class=" fw-6 fs-16  text-black">Avg Waiting</span></p>
                                    </td>
                                    <td scope="col">
                                        <p class="p-0 m-0 weekly-table-name fs-30 fw-6" id="week_serving"></p>
                                        <p class="p-0 m-0 text-secondary fs-12"> <span class=" fw-6 fs-16  text-black">Avg Service</span></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td scope="col">
                                        <!-- <p>&nbsp; -99.27% Prev.week</p> -->
                                    </td>
                                    <td scope="col">
                                        <!-- <p>&nbsp; -99.27% Prev.week</p> -->
                                    </td>
                                    <td scope="col">
                                        <!-- <p>&nbsp; -99.27% Prev.week</p> -->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="col-md-10 col-sm-10 col-12 mb-2 px-2">
                    <div class="bg-white rounded px-3" style="width: 100%;  overflow: scroll;">
                        <h5 class="pt-3 px-3">Weekly Visit</h5>
                        <canvas id="myChart" style="width:100%;max-height:500px"></canvas>



                    </div>
                </div>

                <div class="col-md-10 col-sm-10 col-12 px-2">
                    <div class="bg-white rounded p-3">

                        <table class="table ">
                            <thead>
                                <tr>
                                    <th>Location <i class="fa-solid fa-angle-down" style="float: right;"></i></th>

                                    <th>Visitor<i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                                    <th>Waiting Time<i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                                    <th>Service Time<i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                                </tr>
                            </thead>
                            <tbody id="loc_tab">


                                <!-- Add more rows as needed -->
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade removeshow show active " id="monthly" role="tabpanel"
                aria-labelledby="monthly-tab">
                <div class="row  m-0">
                    <div class="col-md-10 col-sm-10 col-12 px-2  ">
                        <div class="bg-white rounded px-3">
                            <h4 class="px-3 py-3">
                                Performance
                            </h4>
                            <table class="table borderless-table ">
                                <tbody>
                                    <tr>
                                        <td scope="col fw-6">
                                            <p class="p-0 m-0 weekly-table-name fs-30 fw-6"id="month_visitor"></p>
                                            <p class="p-0 m-0 text-secondary fs-12"> <span
                                                    class=" fw-6 fs-16 text-black">Visitor</span></p>
                                        </td>
                                        <td scope="col">
                                            <p class="p-0 m-0 weekly-table-name fs-30 fw-6" id="month_waiting"></p>
                                            <p class="p-0 m-0 text-secondary fs-12"> <span
                                                    class=" fw-6 fs-16  text-black">Avg Waiting</span></p>
                                        </td>
                                        <td scope="col">
                                            <p class="p-0 m-0 weekly-table-name fs-30 fw-6"id="month_serving"></p>
                                            <p class="p-0 m-0 text-secondary fs-12"> <span
                                                    class=" fw-6 fs-16  text-black">Avg Serving</span></p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td scope="col">
                                            <!-- <p>&nbsp; -99.27% Prev.week</p> -->
                                        </td>
                                        <td scope="col">
                                            <!-- <p>&nbsp; -99.27% Prev.week</p> -->
                                        </td>
                                        <td scope="col">
                                            <!-- <p>&nbsp; -99.27% Prev.week</p> -->
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="col-md-10 col-sm-10 col-12 mb-2 px-2">
                        <div class="bg-white rounded px-3" style="width: 100%;overflow: scroll;">
                            <h5 class="pt-3 px-3">Daily Visit</h5>

                            <canvas id="hourly" style="max-width:100%;max-height:400px"></canvas>
                        </div>
                    </div>
                    <div class="col-md-10 col-sm-10 col-12 mb-2 px-2">
                        <div class="bg-white rounded px-3" style="width: 100%; height: 400px; overflow: scroll;">
                            <h5 class="pt-3 px-3">Monthly Visit</h5>

                            <canvas id="myChart2" style="max-width:100%;max-height:400px"></canvas>



                        </div>
                    </div>

                    <div class="col-md-10 col-sm-10 col-12 px-2">
                        <div class="bg-white rounded p-3" >

                            <table class="table ">
                                <thead>
                                    <tr>
                                        <th>Location <i class="fa-solid fa-angle-down" style="float: right;"></i></th>

                                        <th>Visitor<i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                                        <th>Waiting Time<i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                                        <th>Service Time<i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                                    </tr>
                                </thead>
                                <tbody id="mon_loc_tab">

                                    <!-- Add more rows as needed -->
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
    </div>

</div>
<script>
    $(document).ready(function() {
        $('#inputGroupSelect02').on('change', function() {
            setsec()

        });
    });
    $(document).ready(function() {

        var secession_value = "{{$sess_id}}";
        if (secession_value == "") {

            var drop = $("#inputGroupSelect02").val();

            // alert(drop);
            if (drop != "") {
                // alert(drop);
                setsec()
            }
        }
    });

    function setsec() {
        var locationId = $("#inputGroupSelect02").val();
        var locationName = $("#inputGroupSelect02").find('option:selected').text();

        $.ajax({
            url: "{{ route('update.location.session') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: locationId,
                location_name: locationName
            },
            success: function(response) {
                window.location.reload();
                console.log('Session updated successfully');
            },
            error: function(xhr, status, error) {
                console.error('Error updating session');
            }
        });
    }
</script>
<script>
    $('.menu-overview').addClass('current-menu-active');

    $(document).ready(function() {
        // alert();
        $(".removeshow").removeClass("show");
        $(".removeshow").removeClass("active");
    });
</script>
<script>
    $(document).ready(function() {
        var loc_id = "{{ session('location_id') }}";
        var ser_id = "{{ session('service_id') }}";
        var uid = "{{ auth()->user()->id }}";
        var main_id = "{{ auth()->user()->main_id }}";

        $.ajax({
            url: "{{ env('APP_URL') }}/api/dashboard",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: loc_id,
                service_id: ser_id,
                uid: uid,
                main_id: main_id
            },
            success: function(response) {
                $(".visitor_count").html(response.visitcount);
                $("#visitor_waiting").html('<b>' + response.waiting + '</b> Visitors Waiting');
                $("#clerk_visitng").html('<b>' + response.clerk + '</b> Clerk Checkout');
                $("#completed").html('<b>' + response.complete + '</b> Services Completed');

                var value = response.visit;

                filter(loc_id, main_id);
                weekly(loc_id, main_id);
                monthly(loc_id, main_id);
                location_tab(loc_id, main_id);
                hourly_visit(loc_id, main_id);
                monthly_location(loc_id, main_id);
                month_head(loc_id, main_id);
                week_head(loc_id, main_id);

            },
            error: function(xhr, status, error) {
                console.error('Error updating session: ' + error);
            }
        });
    });

    function filter(loc_id, main_id) {
        // alert(loc_id + '-' + main_id);
        $.ajax({
            url: "{{ env('APP_URL') }}/api/dashboard-filter",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: loc_id,
                main_id: main_id
            },
            success: function(response) {
                $("#filter").html(response.filter);
            },
            error: function(xhr, status, error) {
                // console.error('Error updating session: ' + error);
            }
        });
    }
    function weekly(loc_id, main_id) {
        $.ajax({
            url: "{{ env('APP_URL') }}/api/dashboard-weekly",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: loc_id,
                main_id: main_id
            },
            success: function(response) {
                // Prepare data for the chart
                const labels = Object.keys(response.day_counts); // Get day names
                const data = Object.values(response.day_counts); // Get counts

                // Create or update the chart
                var ctx = document.getElementById('myChart').getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Weekly Visit',
                            data: data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(54, 162, 235, 0.2)' // Repeat as needed
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)',
                                'rgba(54, 162, 235, 1)' // Repeat as needed
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    stepSize: 100 // Set the step size to 10
                                }
                            }
                        }
                    }
                });

            },
            error: function(xhr, status, error) {
                console.error('Error updating session: ' + error);
            }
        });
    }



function location_tab(loc_id, main_id){
    $.ajax({
            url: "{{ env('APP_URL') }}/api/dashboard-location",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: loc_id,
                main_id: main_id
            },
            success: function(response) {
                // Prepare data for the chart
              $('#loc_tab').html(response.loc_tab);

            },
            error: function(xhr, status, error) {
                console.error('Error updating session: ' + error);
            }
        });
}
function monthly(loc_id, main_id) {
        $.ajax({
            url: "{{ env('APP_URL') }}/api/dashboard-monthly",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: loc_id,
                main_id: main_id
            },
            success: function(response) {
                const labels = Array.from({ length: response.day_counts.length }, (_, i) => i + 1);
                const data = response.day_counts;

                var ctx = document.getElementById('myChart2').getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Monthly Visit',
                            data: data,
                            fill: false,
                            borderColor: 'rgb(75, 192, 192)',
                            tension: 0.1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    stepSize: 100
                                }
                            }
                        }
                    }
                });
            },
            error: function(xhr, status, error) {
                console.error('Error updating session: ' + error);
            }
        });
    }

function hourly_visit(loc_id, main_id){
    $.ajax({
            url: "{{ env('APP_URL') }}/api/dashboard-hourly",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: loc_id,
                main_id: main_id
            },
            success: function(response) {
                const labels = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0') + ':00'); // Generate labels for 24 hours
            const data = response.hour_counts; // Get counts

            // Create or update the chart
            var ctx = document.getElementById('hourly').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Hourly Visit',
                        data: data,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 10 // Set the step size to 10
                            }
                        }
                    }
                }
            });
            },
            error: function(xhr, status, error) {
                console.error('Error updating session: ' + error);
            }
        });
}

function monthly_location(loc_id, main_id){
    $.ajax({
            url: "{{ env('APP_URL') }}/api/month-location-value",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: loc_id,
                main_id: main_id
            },
            success: function(response) {
                // Prepare data for the chart
              $('#mon_loc_tab').html(response.loc_tab);

            },
            error: function(xhr, status, error) {
                console.error('Error updating session: ' + error);
            }
        });
}

function month_head(loc_id, main_id){
    $.ajax({
            url: "{{ env('APP_URL') }}/api/month-head",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: loc_id,
                main_id: main_id
            },
            success: function(response) {
                // Prepare data for the chart
            //   $('#mon_loc_tab').html(response.loc_tab);
            $('#month_serving').html(response.service_time+' hrs');
              $('#month_waiting').html(response.average_wait+' hrs');
              $('#month_visitor').html(response.visitor_count);
            },
            error: function(xhr, status, error) {
                console.error('Error updating session: ' + error);
            }
        });
}
function week_head(loc_id, main_id){
    $.ajax({
            url: "{{ env('APP_URL') }}/api/week-head",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                location_id: loc_id,
                main_id: main_id
            },
            success: function(response) {
                // Prepare data for the chart
            //   $('#mon_loc_tab').html(response.loc_tab);
              $('#week_serving').html(response.service_time+' Min');
              $('#week_waiting').html(response.average_wait+' Min');
              $('#week_visitor').html(response.visitor_count);
            },
            error: function(xhr, status, error) {
                console.error('Error updating session: ' + error);
            }
        });
}

</script>


@endsection