@extends('layout.maincontant')

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


@section('main-content-top-nav-btn')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<div class="row ">
    <div class="d-flex">
        <!-- <button class="btn btn-info text-primary border-0"><i class="fa-solid fa-location-arrow"></i>
                Location
            </button>
            <button style='background-color:#fff9ea;color:#e1994d;' class="btn btn-info  border-0"><i class="fa-solid fa-sliders"></i>
                Service
            </button>
            <button style='background-color:#f0ffea;color:#60ac4a;' class="btn btn-info  border-0"><i class="fa-regular fa-calendar"></i>
                Date
            </button> -->
            <div class="custom-dropdown">
            <select style='text-align: left;' class="custom-select btn btn-info text-primary  border-0 p-2" id="inputGroupSelect02">
                @if($loc==null)
                <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 class="custom-dropdown2 mx-2 ">
            <select style='text-align: left;'class="custom-select btn btn-info border-0 p-2" style="background-color:#fff9ea !important;color:#f0b87b" id="inputGroupSelect03">
                @if(($services==null) )
                <option value="" selected><i class="fa-solid fa-location-arrow"></i> Service</option>
                @else
                @php
                $servicesessionId = session('service_id');
                @endphp
                @foreach ($services as $ser)
                <option value="{{ $ser->id }}" {{ $servicesessionId == $ser->id ? 'selected' : '' }}>
                    {{ $ser->services }}
                </option>
                @endforeach
                @endif
            </select>
        </div>
        <button style='background-color:#f0ffea;color:#60ac4a;' class="btn btn-info  border-0" id="datepick">
    <i class="fa-regular fa-calendar"></i>  {{ session('from_date') != "" ? session('from_date') . ' to ' . session('to_date') : 'Date' }}
</button>

    </div>
</div>

@endsection
@section('main-content')
<div class="row ">
    <!-- .. -->
    <div class="col-md-12 bg-white  mb-2 py-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;
            }

            .serving-now-card-nav-tab>li>button {
                color: black
            }

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

            .serving-now-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;
            }

            .serving-now-card-nav-tab>li>a>span {
                display: flex;
                color:black;
            }

            .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;
            }
            .overview-nav-tab-top>li>button{
                color:black;
            }
            .overview-nav-tab-top>li>.active{
                color:rgb(255, 255, 255) !important;
            }
        </style>

        <ul class="nav nav-pills   bg-white rounded serving-now-card-nav-tab" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <a  href="#pills-org-per" class="nav-link anchortab btn-sm them-fs-3 active" id="pills-org-per-tab" data-bs-toggle="pill" data-bs-target="#pills-org-per" type="button" role="tab" aria-controls="pills-org-per" aria-selected="true"><span>Organization Performance</span>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a href="#pills-loc-per" class="nav-link anchortab btn-sm them-fs-3 " id="pills-loc-per-tab" data-bs-toggle="pill" data-bs-target="#pills-loc-per" type="button" role="tab" aria-controls="pills-loc-per" aria-selected="false"><span>Location Performance</span>
                </a>
            </li>

            <li class="nav-item" role="presentation">
                <a href="#pills-team-per" class="nav-link anchortab btn-sm them-fs-3 " id="pills-team-per-tab" data-bs-toggle="pill" data-bs-target="#pills-team-per" type="button" role="tab" aria-controls="pills-team-per" aria-selected="false"><span>Team performance</span>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a href="#pills-vis-his" class="nav-link anchortab btn-sm them-fs-3 " id="pills-vis-his-tab" data-bs-toggle="pill" data-bs-target="#pills-vis-his" type="button" role="tab" aria-controls="pills-vis-his" aria-selected="false"><span>Visitor History</span>
                </a>
            </li>
        </ul>
    </div>


    <div class="tab-content col-md-12 p-0 m-0 " id="myTabContent ">

        <div class="tab-pane fade  show active removeshow m-0 p-0" id="pills-org-per" role="tabpanel" aria-labelledby="weekly-tab">
            @include('pages.org-performance')
        </div>

        <div class="tab-pane fade removeshow  m-0 p-0" id="pills-loc-per" role="tabpanel" aria-labelledby="weekly-tab">

            @include('pages.loc-performance')

        </div>
        <div class="tab-pane fade removeshow  m-0 p-0" id="pills-team-per" role="tabpanel" aria-labelledby="monthly-tab">
            @include('pages.team-performance')

        </div>
        <div class="tab-pane fade removeshow  m-0 p-0" id="pills-vis-his" role="tabpanel" aria-labelledby="weekly-tab">
            @include('pages.vis-history')

        </div>
    </div>

</div>
<script>
        $('.menu-serving-now').addClass('current-menu-active');

        $(document).ready(function() {

            // $(".removeshow").removeClass("show");
            // $(".removeshow").removeClass("active");
            // Handle tab click events
            $('.anchortab').on('click', function(e) {
                e.preventDefault();
                var target = $(this).attr('href');
                $('.tab-pane').removeClass('show active');
                $(target).addClass('show active');
                $('.anchortab').removeClass('active');
                $(this).addClass('active');

                // Update URL hash
                window.location.hash = target.replace('#', '');
                var hash1 = window.location.hash;

            });

            // Check hash in URL on page load
            if (window.location.hash) {
                var hash = window.location.hash;

                // alert(hash);
                $('.removeshow').removeClass('show active');

                $('.anchortab[href="' + hash + '"]').tab('show');
                $(hash).removeClass('fade');
                $(hash).addClass(' show ');
                $(hash).addClass(' active');



            }
        });
    </script>
<script>
    $(document).ready(function() {
        $('#datepick').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        });

        $('#datepick').on('apply.daterangepicker', function(ev, picker) {
            var startDate = picker.startDate.format('YYYY-MM-DD');
            var endDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(startDate + ' to ' + endDate); // Update the input with the selected range
            alert('Selected date range: ' + startDate + ' to ' + endDate);
            $("#datepick").html(startDate + ' to ' + endDate);

            $.ajax({
            url: "{{ route('update.date.session') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                from_date: startDate,
                to_date: endDate

            },
            success: function(response) {
                window.location.reload();
                // console.log('Session updated successfully');

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

        $('#datepick').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
</script>

<script>
    // $(document).ready(function() {

    //     $('.menu-serving-now').addClass('current-menu-active');

    //     // alert();
    //     $(".removeshow").removeClass("show");
    //     $(".removeshow").removeClass("active");
    // });
</script>
<script>
    $(document).ready(function() {
        // setsec();
        $('#inputGroupSelect02').on('change', function() {
            setsec()

        });
    });
    $(document).ready(function() {
        // alert();
        var secession_value = "{{$sess_id}}";
        if (secession_value == "") {
            var drop = $("#inputGroupSelect02").val();
            // alert(drop);
            if (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>
    $(document).ready(function() {
        $('#inputGroupSelect03').on('change', function() {
            setsec2()

        });
    });
    $(document).ready(function() {
        var desk_sess = "{{!empty($servicesessionId) ? $servicesessionId : ''}}";
        if (desk_sess == "") {
            var drop = $("#inputGroupSelect03").val();
            // alert(drop);
            if (drop != "") {
                setsec2()
            }
        }
    });

    function setsec2() {
        var service_id = $("#inputGroupSelect03").val();
        var serviceName = $("#inputGroupSelect03").find('option:selected').text();

        $.ajax({
            url: "{{ route('update.service.session') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                service_id: service_id,
                serviceName: serviceName
            },
            success: function(response) {
                window.location.reload();
                console.log('Session updated successfully');
            },
            error: function(xhr, status, error) {
                console.error('Error updating session');
            }
        });
    }
</script>
@endsection