@extends('layout.maincontant')



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

@section('main-content-top-nav-btn')
<style>
    .btn-close {

        --bs-btn-close-bg: none !important;

    }

    .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-dropdown2 {
        position: relative;
        display: inline-block;
    }

    .custom-dropdown2 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: #f0b87b;
        cursor: pointer;
    }

    .custom-dropdown2::before {
        content: "\f1de";
        /* 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: #f0b87b;
    }

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

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

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

    .custom-dropdown3 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: #afdbb6;
        cursor: pointer;
    }

    .custom-dropdown3::before {
        content: "\f108";
        /* 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: #1d5926;
    }

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

    .custom-dropdown3 {
        border: 1px solid #1d5926;
        border-radius: 4px;
        background-color: #afdbb6;
        /* padding: 5px 15px; */
    }

    p {
        margin-top: 0;
        margin-bottom: 4px;
        font-size: 12px;
    }

    .selected {
        border: 1px solid #52050A !important;
        color: #52050A !important;
        background-color: #f2e6eb !important;
    }
</style>
<!-- <h1>{{auth()->user()->services}}</h1>
<h1>{{auth()->user()->bench}}</h1> -->
<div class="row ">
    <div class="d-flex">
        <!-- <div><button class="btn btn-info text-primary border-0"><i class="fa-solid fa-location-arrow"></i>
                Location</button></div> -->


        <div class="custom-dropdown">
            <select style='text-align: left;' class="custom-select btn btn-info text-primary border-0 them-fs-3" 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 them-fs-3" 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
                if($active_service!=""){
                $servicesessionId = $active_service;
                }else{
                    $servicesessionId="";
                }
                @endphp
                @foreach ($services as $ser)
                @if($active_service==$ser->id)
                <option value="{{ $ser->id }}" {{ $servicesessionId == $ser->id ? 'selected' : '' }}>
                    {{ $ser->services }}
                </option>
                @endif
                @endforeach
                @endif
            </select>
        </div>
        <div class="custom-dropdown3 mx-2">
            <select style='text-align: left;' class="custom-select btn btn-info border-0 them-fs-3" style="background-color:#afdbb6 !important;color:#1d5926" id="deskchange">
                @if($desk==null)
                <option value="" selected><i class="fa-solid fa-location-arrow"></i> Desk</option>
                @else
                @php

                $dsksessionId = $active_desk;
                @endphp
                @foreach ($desk as $ser)
                @if($dsksessionId==$ser->id)
                <option value="{{ $ser->id }}" {{ $dsksessionId == $ser->id ? 'selected' : '' }}>
                    {{ $ser->desk_name }}
                </option>
                @endif
                @endforeach
                @endif
            </select>
        </div>
        <!-- <div class="px-2"><button class="btn btn-info border-0" style="background-color:#fff9ea !important;color:#f0b87b"><i class="fa-solid fa-sliders"></i>
                Service</button>
        </div> -->


    </div>

</div>
<!-- <h1>{!! nl2br(e(print_r(session()->all(), true))) !!}</h1> -->
@endsection
@section('main-content')

<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary">
  Launch demo modal
</button> -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Add Visitor</h1>
                <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"> <i class="fa-solid fa-circle-xmark"></i></button>
            </div>
            <div class="modal-body">
                <form action="" method="post" id="vistoradd">
                    @if($input_default!="")
                    @foreach($input_default as $ins)

                    @if($ins->input_type==1)
                    <div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">Service</label>
                        <select class="form-select" aria-label="Default select example" name="{{$ins->label_id}}" id="{{$ins->label_id}}">
                            @if($services==null)
                            <option value="" selected><i class="fa-solid fa-location-arrow"></i>{{$ins->label}}</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>
                    @else
                    <div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">{{$ins->label}}</label>
                        <input type="text" class="form-control" id="{{$ins->label_id}}" name="{{$ins->label_id}}">
                    </div>
                    @endif
                    @endforeach
                    @endif
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn " style="background:#52050A;color:#ffffff" onclick="addvistor()">Add Vistor</button>
                <button type="button" class="btn " data-bs-dismiss="modal" style="background:#fff6f7;color:#af777e">Cancel</button>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Asign To</h1>
                <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"> <i class="fa-solid fa-circle-xmark"></i></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col text-secondary">
                        <p>Search For Team Member</p>
                        <hr>
                        <p>Nobody</p>
                        <hr>
                        <p>Arun Kumar</p>
                    </div>
                </div>
            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn "style="background:#52050A;color:#ffffff">Add Vistor</button>
                <button type="button" class="btn " data-bs-dismiss="modal"style="background:#fff6f7;color:#af777e">Cancel</button>

            </div> -->
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Forward Visitor To</h1>
                <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"> <i class="fa-solid fa-circle-xmark"></i></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col text-secondary">
                        <p>Search For Team Member</p>
                        <hr>
                        <p>Nobody</p>
                        <hr>
                        <p>Arun Kumar</p>
                        <hr>
                        <p>Aaaa</p>
                        <hr>
                        <p>Bbbb</p>
                        <hr>
                        <p>Cccc</p>
                        <hr>
                    </div>
                </div>
            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn "style="background:#52050A;color:#ffffff">Add Vistor</button>
                <button type="button" class="btn " data-bs-dismiss="modal"style="background:#fff6f7;color:#af777e">Cancel</button>

            </div> -->
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModal4" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Mark As On Show?</h1>
                <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"> <i class="fa-solid fa-circle-xmark"></i></button>
            </div>
            <div class="modal-body">
                <div class="row ">

                    <p>The Visitor Will Be Marked As On Show</p>



                </div>
                <div class=" form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
                    <label class="form-check-label" for="flexCheckIndeterminate">
                        Do not Show Again Today
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn " data-bs-dismiss="modal" style="background:#fff6f7;color:#af777e">Cancel</button>
                <button type="button" class="btn " data-bs-toggle="modal" data-bs-target="#exampleModal5" style="background:#52050A;color:#ffffff">Remove</button>


            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModal5" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Return To Waiting</h1>
                <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"> <i class="fa-solid fa-circle-xmark"></i></button>
            </div>
            <div class="modal-body">

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                    <label class="form-check-label" for="flexRadioDefault1">
                        First in the waiting list
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                    <label class="form-check-label" for="flexRadioDefault1">
                        Last in the waiting list
                    </label>
                </div>
                <hr>
                <div class=" form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
                    <label class="form-check-label" for="flexCheckIndeterminate">
                        Assign To Me
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn " data-bs-dismiss="modal" style="background:#fff6f7;color:#af777e">Cancel</button>
                <button type="button" class="btn " onclick="nextdesign()" style="background:#52050A;color:#ffffff">Remove</button>


            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModal6" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5 them-fs-3" id="exampleModalLabel">Assing Visitor To</h1>
                <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-circle-xmark"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col text-secondary">
                        <input type="text" class="form-control" name="search_user" id="search_user" placeholder="Search User" onkeyup="filterTeams()">
                        <hr>
                        @if(!empty($team))
                        @foreach ($teams as $tea)
                        <p onclick="toggleColor(this)" class="p-2 rounded industry-option team-member" style="border: 1px solid #0a58ca; color: #0a58ca; background-color: #f8f8f9;" data-sel="{{ $tea->id }}">
                            {{$tea->fname." ".$tea->lname}}
                        </p>
                        @endforeach
                        @endif
                        <input type="hidden" name="user_id" id="user_id">
                        <!-- <p class="text-danger">Add Visitor</p> -->
                        <button class="btn btn-secondary" onclick="assign_id()">Assign</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModal7" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Remove visitor</h1>
                <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-circle-xmark"></i>
                </button>
            </div>
            <div class="modal-body">

                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col text-secondary">
                            <p>The visitor will be removed from the Waiting List.This action cannot be undone</p>


                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer mb-3">
                <button type="button" class="btn " data-bs-dismiss="modal" style="background:#fff6f7;color:#af777e">Cancel</button>
                <button type="button" class="btn " data-bs-toggle="modal" data-bs-target="#exampleModal5" style="background:#52050A;color:#ffffff">Remove</button>

            </div>
        </div>
    </div>
</div>
@php
// print_r(session()->all());
$prefix=(session('location_name'));
$prefix = strtoupper(substr($prefix, 0, 2));
@endphp
<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;
            }

            .circle {
                width: 40px;
                height: 40px;
                background-color: #f0f0f0;
                display: flex;
                justify-content: center;
                align-items: center;
                color: blue;
            }

            .img-circle1 {
                width: 20px !important;
                height: 20px !important;
            }

            .list-group-numbered {
                counter-reset: list-counter;
            }

            .list-group-numbered .list-group-item {
                border: none;
                position: relative;
                padding-left: 2rem;
                /* Space for the custom bullets */
            }

            .list-group-numbered .list-group-item::before {
                counter-increment: list-counter;
                content: 'o';
                position: absolute;
                left: 0;
                top: 0%;
                transform: translateY(-50%);
                font-size: 2.5rem;
                color: red;
            }

            .list-group-numbered .list-group-item::after {
                content: '';
                position: absolute;
                left: 11px;
                top: 101%;
                height: 80px;
                border-left: 2px solid #9a9797;
                transform: translateY(-50%);
            }

            .list-group-numbered .list-group-item:last-child::after {
                content: none;
            }

            h5 {
                font-size: medium !important;
            }

            . them-fs-3 {
                font-size: 12PX;
            }

            .btn {
                font-size: 14PX;
            }
        </style>
        <div style='height:77vh' class="row">
            <div style="height:100%;overflow-y:scroll;" class="col-md-4 mt-1">
                <div class="card-1">
                    <div class="d-flex">
                        <div style="margin-top: 8px;">
                            <h5 class='them-fs-3 fw-5'><i class="fa-solid fa-chevron-down"></i> Serving Now</h5>
                        </div>
                        <div>
                            <p class="rounded-circle circle mx-2 fw-6" style="background:#d9e8ff !important">0</p>
                        </div>
                    </div>
                    @if(!empty($serving_now))
                    @foreach ($serving_now as $wait)


                    <div class="card-body bg-white col-12 rounded mt-3">
                        <div class="p-3 waiting" id="{{$wait->id}}">
                        <h5 class="card-title float-start them-fs-3">{{$wait->f_name." ".$wait->l_name}}</h5>

                            <h5 class="card-title float-end them-fs-3 "style="color:#1e0ea9">{{$prefix."-".$wait->tiqkets}}</h5>

                            <div class="mt-4 col-md-12 d-flex align-items-center py-2">
                                <span class='px-2  them-fs-3  font-weight-bold fw-6  them-fs-3  text-secondary bolder'>
                                    Service
                                </span>
                                <span class='mx-3 px-1 text-white rounded  them-fs-3  them-fs-3 px-2' style='background:#6d67a2'>
                                    @foreach ($services as $ser)
                                    @if($wait->service== $ser->id)
                                    {{$ser->services}}
                                    @endif
                                    @endforeach
                                </span>
                            </div>
                            <div class="py-2 col-md-12 d-flex align-items-center">
                                <span class='px-2  them-fs-3  font-weight-bold fw-6  them-fs-3  text-secondary bolder'>
                                    Clerk
                                </span>
                                <div class="mx-4 input-group">
                                    <img src="{{asset('assets/images/images.png')}}" height="100%" width="50%" class="img-circle1">
                                    <span class='px-2 font-weight-bold fw-6  them-fs-3  text-dark bolder  them-fs-3 '>
                                        {{auth()->user()->fname." ".auth()->user()->lname}}
                                    </span>
                                </div>
                            </div>

                            <div class=" col-md-12 d-flex align-items-center">

                                @foreach ($serving_now as $wait)
                                @foreach($teams as $tea)
                                @if($wait->assign_to == $tea->id)
                                <p class="rounded p-1 text-light bolder" style="background:#67a270">Assign To: {{ $tea->fname . " " . $tea->lname }}</p>
                                @endif
                                @endforeach
                                @endforeach

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

                    @endforeach
                    @endif
                </div>
                <div class="card-2 mt-1">
                    <div class="d-flex">
                        <div style="margin-top: 8px;">
                            <h5 class='them-fs-3 fw-5  them-fs-3 '><i class="fa-solid fa-chevron-down"></i> Waiting</h5>
                        </div>
                        <div>
                            <p class="rounded-circle circle mx-2  them-fs-3 fw-6" style="background:#ffefd9;color:#a3736b">
                                0                            </p>
                        </div>
                    </div>
                    @if(!empty($waiting))
                    @foreach ($waiting as $wait)


                    <div class="card-body bg-white col-12 rounded mt-3">
                        <div class="p-3 waiting" id="{{$wait->id}}">
                            <h5 class="card-title float-start  them-fs-3 ">{{$wait->f_name." ".$wait->l_name}}</h5>

                            <h5 class="card-title float-end  them-fs-3 "style="color:#1e0ea9">{{$prefix."-".$wait->tiqkets}}</h5>

                            <div class="mt-4 col-md-12 d-flex align-items-center">
                                <span class='px-2 font-weight-bold fw-6  them-fs-3  text-secondary bolder py-3'>
                                    Service
                                </span>
                                <span class='mx-3 px-1 text-white rounded  them-fs-3  them-fs-3 px-2' style='background:#6d67a2'>
                                    @foreach ($services as $ser)
                                    @if($wait->service== $ser->id)
                                    {{$ser->services}}
                                    @endif
                                    @endforeach
                                </span>
                            </div>
                            <div class=" col-md-12 d-flex align-items-center">
                                <span class='px-2 font-weight-bold fw-6  them-fs-3  text-secondary bolder'>
                                    Clerk
                                </span>
                                <div class="mx-4 input-group">
                                    <img src="{{asset('assets/images/images.png')}}" height="100%" width="50%" class="img-circle1"><span class='px-2 font-weight-bold fw-6  them-fs-3  text-dark bolder'>
                                        {{auth()->user()->fname." ".auth()->user()->lname}}
                                    </span>
                                </div>
                            </div>
                            <div class="py-2 col-md-12 d-flex align-items-center">

                                @foreach ($waiting as $wait)
                                @foreach($teams as $tea)
                                @if($wait->assign_to == $tea->id)
                                <p class="rounded p-1 text-light bolder" style="background:#67a270">Assign To: {{ $tea->fname . " " . $tea->lname }}</p>
                                @endif
                                @endforeach
                                @endforeach

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

                    @endforeach
                    @endif
                </div>
                <div class="card-3 mt-1">
                    <div class="d-flex">
                        <div style="margin-top: 8px;">
                            <h5 class='them-fs-3 fw-5 them-fs-3'><i class="fa-solid fa-chevron-down "></i> Completed</h5>
                        </div>
                        <div>
                            <p class="rounded-circle circle mx-2 fw-6" style="background:#dbd9ff;color:#4033d2">0</p>
                        </div>
                    </div>
                    @if(!empty($complete))
                    @foreach ($complete as $wait)
                    <div class="card-body bg-white col-12 rounded mb-3">
                        <div class="p-3 complete" id="{{$wait->id}}">
                        <h5 class="card-title float-start">{{$wait->f_name." ".$wait->l_name}}</h5>

                            <h5 class="card-title float-end"style="color:#1e0ea9">{{$prefix."-".$wait->tiqkets}}</h5>

                            <div class="mt-4 col-md-12 d-flex align-items-center">
                                <span class='px-2 font-weight-bold fw-6  them-fs-3  text-secondary bolder'>
                                    Service
                                </span>
                                <span class='mx-3 px-1 text-white rounded  them-fs-3  them-fs-3 px-2 ' style='background:#6d67a2'>
                                    @foreach ($services as $ser)
                                    @if($wait->service== $ser->id)
                                    {{$ser->services}}
                                    @endif
                                    @endforeach
                                </span>
                            </div>
                            <div class="mt-4 col-md-12 d-flex align-items-center">
                                <span class='px-2 font-weight-bold fw-6  them-fs-3  text-secondary bolder'>
                                    Clerk
                                </span>
                                <div class="mx-4 input-group">
                                    <img src="{{asset('assets/images/images.png')}}" height="100%" width="50%" class="img-circle1"><span class='px-2 font-weight-bold fw-6  them-fs-3  text-dark bolder'>
                                        {{$wait->user_name}}
                                    </span>
                                </div>
                            </div>
                            <div class="mt-4 col-md-12 d-flex align-items-center">

                                @foreach ($complete as $wait)
                                @foreach($teams as $tea)
                                @if($wait->assign_to == $tea->id)
                                <p class="rounded p-1 text-light bolder" style="background:#67a270">Assign To: {{ $tea->fname . " " . $tea->lname }}</p>
                                @endif
                                @endforeach
                                @endforeach

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

                    @endforeach
                    @endif
                </div>

                <div class=" row " style="position: sticky;bottom: 0px;">
                    <button data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn" style="background:#52050A;color:#ffffff">+ Add Visitors</button>
                </div>
            </div>
            <div style="height:100%;overflow-y:scroll;" class="col-md-4 mt-1">
                <div class="card-4 bg-white p-2">
                    <div class="d-flex">
                        <div class="mt-4 col-md-12 d-flex align-items-center">
                            <h5 class='px-2 '>
                                {{auth()->user()->fname." ".auth()->user()->lname}}
                            </h5>
                            <span class='mx-3 px-1 text-white rounded them-fs-3 px-2' style='background:#67a270' id="timing">
                                Serving Now <i class="fa-regular fa-clock"></i>
                            </span>
                        </div>
                        <div>

                        </div>
                    </div>
                    <div class="card-body bg-white col-12 rounded">
                        <div class="p-3">

                            <div class="mt-4 col-md-12 d-flex align-items-center">
                                <span class='px-2 font-weight-bold fw-6  them-fs-3  text-secondary bolder'>
                                    Phone Number
                                </span>
                                <span class='mx-4 px-2  them-fs-3 rounded'>
                                    Service
                                </span>
                            </div>
                            <div class="mt-4 col-md-12 d-flex align-items-center">
                                <span class='px-2 font-weight-bold fw-6  them-fs-3 text-secondary bolder' id="mobile_num_v">
                                    <i class="fa-regular fa-copy"></i>
                                </span>
                                <span class='mx-3 px-1 text-white rounded them-fs-3 px-2' style='background:#67a270' id="services">
                                    Information
                                </span>
                            </div>
                            <div class="mt-5">
                                <form action="" class='them-fs-3' method="post" id="finish_form">
                                    <div class="mb-3">
                                        <label for="exampleFormControlInput1" class="form-label">First Name</label>
                                        <input type="text" class="form-control" id="fname_v" name="fname_v">
                                        <input type="hidden" name="id" id="id">
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleFormControlInput1" class="form-label">Last Name</label>
                                        <input type="text" class="form-control" id="lname_v" name="lname_v">
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleFormControlInput1" class="form-label">Phone Number</label>
                                        <input type="text" class="form-control" id="mobile_v" name="mobile_v">
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleFormControlInput1" class="form-label">Service</label>
                                        <select class="form-select" id="service_v" aria-label="Default select example" name="service_v">
                                            @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>
                                    <div class="mb-3">
                                        <label for="exampleFormControlInput1" class="form-label">Label</label>
                                        <input type="text" class="form-control" id="label_v" name="label_v">
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="row first" style="position: sticky;bottom: 0px;">
                        <!-- assign to model -->
                        <!-- <div class="col-5"><button class="btn w-100 dissable" data-bs-toggle="modal" data-bs-target="#exampleModal2" style="background:#52050A;color:#ffffff">finishing service</button></div> -->
                        <div class="col-5" id="finish"><button class="btn w-100" id="finish1" onclick="finish_service()" style="background:#52050A;color:#ffffff">Finish</button></div>
                        <!-- <div class="col-5"><button class="btn w-100" data-bs-toggle="modal" data-bs-target="#exampleModal3" style="background:#fff6f7;color:#af777e">call next</button></div> -->
                        <div class="col-5" id="call_next"><button class="btn w-100" onclick="call_next()" style="background:#fff6f7;color:#af777e">Call Next</button></div>
                     <!-- <div class="col-2"><button class="btn w-100 " data-bs-toggle="modal" data-bs-target="#exampleModal4" style="background:#fff6f7;color:#af777e"><i class="fa-solid fa-ellipsis-vertical"></i></button></div> -->
                        <div class="col-2 px-3" id="extra">
                            <div class="dropdown">
                                <a href="#" class="dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown" aria-expanded="false" class="" style="background:#fff6f7;color:#af777e">
                                    <button class="btn w-100" style="background:#fff6f7;color:#af777e"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                                    {{-- <i class="fa fa-chevron-down ms-2"></i> --}}
                                </a>
                                <ul class="dropdown-menu  them-fs-3 dropdown-menu-end mt-2">
                                    <li>
                                        <a class="dropdown-item d-flex  them-fs-3 align-items-center" data-bs-toggle="modal" data-bs-target="#exampleModal6">
                                            <i class="fa fa-user me-2"></i> Assign To
                                        </a>
                                    </li>
                                    <li>

                                        <button type="submit" class="dropdown-item  them-fs-3 d-flex align-items-center" onclick="delete_visitor()">
                                            <i class="fa fa-trash me-2"></i> Cancel
                                        </button>

                                    </li>
                                    <li>

                                        <button type="submit" class="dropdown-item  them-fs-3 d-flex align-items-center" onclick="no_show()">
                                            <i class="fa fa-trash me-2"></i> No Show
                                        </button>

                                    </li>
                                    <li>

                                        <button type="submit" class="dropdown-item  them-fs-3 d-flex align-items-center" onclick="service_paused()">
                                            <i class="fa fa-trash me-2"></i> Service Paused
                                        </button>

                                    </li>
                                    <li>

                                        <button type="submit" class="dropdown-item  them-fs-3 d-flex align-items-center" onclick="service_closed()">
                                            <i class="fa fa-trash me-2"></i> Service Closed
                                        </button>

                                    </li>
                                     <li>

                                        <button type="submit" class="dropdown-item  them-fs-3 d-flex align-items-center" onclick="service_started()">
                                            <i class="fa fa-trash me-2"></i> Service Started
                                        </button>

                                    </li>
                                     <li>

                                        <button type="submit" class="dropdown-item  them-fs-3 d-flex align-items-center" onclick="desk_paused()">
                                            <i class="fa fa-trash me-2"></i> Desk Paused
                                        </button>

                                    </li>
                                     <li>

                                        <button type="submit" class="dropdown-item  them-fs-3 d-flex align-items-center" onclick="desk_closed()">
                                            <i class="fa fa-trash me-2"></i> Desk Closed
                                        </button>

                                    </li>
                                     <li>

                                        <button type="submit" class="dropdown-item  them-fs-3 d-flex align-items-center" onclick="desk_started()">
                                            <i class="fa fa-trash me-2"></i> Desk Started
                                        </button>

                                    </li>
                                </ul>
                            </div>
                        </div>


                    </div>
                    <div class="row second " style="margin-top:120px">
                        <div class="col-3">
                            <button class="btn w-100 h-100" style="background:#52050A;color:#ffffff">Call Visitor</button>
                        </div>
                        <div class="col-3">
                            <button class="btn  w-100 h-100" style="background:#fff6f7;color:#af777e" data-bs-toggle="modal" data-bs-target="#exampleModal6">Assign to</button>
                        </div>
                        <div class="col-4">
                            <button class="btn w-100 h-100" style="background:#fff6f7;color:#af777e">Call for group service</button>
                        </div>
                        <div class="col-2">
                            <button class="btn  w-100 h-100 rounded" style="background:#fff6f7;color:#af777e" data-bs-toggle="modal" data-bs-target="#exampleModal7"><i class="fa-regular fa-trash-can"></i></button>
                        </div>
                    </div>

                </div>

            </div>
            <div style="height:100%;overflow-y:scroll;" class="col-md-4 mt-1">
                <div class="card-1 bg-white p-2">
                    <div class="d-flex">
                        <div class="mt-4 col-md-12 d-flex align-items-center">
                            <h5 class='px-2 name_v'>
                                Sanjay J
                            </h5>
                            <span class='mx-3 px-1 text-white rounded  them-fs-3 px-2' style='background:#67a270' id="timing2">
                                serving now <i class="fa-regular fa-clock"></i>
                            </span>
                        </div>
                        <div>

                        </div>
                    </div>
                    <div class="mt-3">
                        <ol class="list-group list-group-numbered">
                            <li class="list-group-item " id="check_in"> <br>Visitor Checked in by me</li>
                            <li class="list-group-item mt-5" id="check_out"> <br>Visitor called by me</li>
                        </ol>
                        <div class="row" style="margin-top:580px">
                            <!-- <div class="col-5"><button class="btn w-100 dissable" disabled style="background:#52050A;color:#ffffff">finishing service</button></div>
                        <div class="col-5"><button class="btn w-100" style="background:#fff6f7;color:#af777e">call next</button></div>
                        <div class="col-2"><button class="btn w-100 " style="background:#fff6f7;color:#af777e"><i class="fa-solid fa-ellipsis-vertical"></i></button></div> -->



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

        </div>

    </div>

</div>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function call_next(){

        var current_id=$("#id").val();
        if(current_id !=""){
            var fname_v=$("#fname_v").val();
            var lname_v=$("#lname_v").val();
            var id=$("#id").val();
            var mobile_v=$("#mobile_v").val();
            var service_v=$("#service_v").val();
            var label_v=$("#label_v").val();
        }else{
            var fname_v="";
            var lname_v="";
            var id="";
            var mobile_v="";
            var service_v=$("#service_v").val();
            var label_v=$("#label_v").val();
        }
        // alert(current_id);
        var lid = "{{$sess_id}}";
        var user_name = "{{ auth()->user()->fname . ' ' . auth()->user()->lname }}";
        var uid = "{{auth()->user()->id}}";
        var u_main_id = "{{auth()->user()->main_id}}";
        var desk_name = "{{!empty($dsksessionId) ? $dsksessionId : 0}}";
        var service="{{$active_service}}";
        var url = "{{ env('APP_URL') }}/api/call_next";



        $.ajax({
            type: 'POST',
            url: url,
            data: {uid:uid,lid:lid,u_main_id:u_main_id,desk_id:desk_name,
                user_name:user_name,service:service,fname_v:fname_v,
                lname_v:lname_v,id:id,mobile_v:mobile_v,service_v:service_v,
                label_v:label_v
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: response.message,
                        showConfirmButton: false,
                        timer: 3500,
                        showCloseButton: true
                    });
                    // window.location.reload();
                    $('#mobile_num_v').html(response.data.mobile);
                    $('#services').html(response.data.service_name);
                    $('#fname_v').val(response.data.f_name);
                    $('#lname_v').val(response.data.l_name);
                    $('#mobile_v').val(response.data.mobile);
                    $('#service_v').val(response.data.service);
                    $('#label_v').val(response.data.web_link);
                    $('#id').val(response.data.id);
                    var time_v = new Date(response.data.date_time); // Parse the date string
                    var current_time = new Date();
                    var diff_ms = current_time - time_v;
                    var diff_hours = Math.floor(diff_ms / 3600000); // Convert milliseconds to hours
                    var diff_mins = Math.floor((diff_ms % 3600000) / 60000); // Remaining minutes after hours
                    $('#timing').html('<i class="fa-regular fa-clock"></i>' + diff_hours + ' hr ' + diff_mins + ' min ');
                    $('.name_v').html(response.data.f_name + " " + response.data.l_name);
                    $('#timing2').html('<i class="fa-regular fa-clock"></i>' + diff_hours + ' hr ' + diff_mins + ' min ');
                    var checkInAt = new Date(response.data.check_in_at);
                    // Extract the hours, minutes, and seconds
                    var hours = checkInAt.getHours();
                    var minutes = checkInAt.getMinutes();
                    var seconds = checkInAt.getSeconds();
                    // Format the time as HH:MM:SS
                    var formattedTime =
                        (hours < 10 ? '0' : '') + hours + ':' +
                        (minutes < 10 ? '0' : '') + minutes + ':' +
                        (seconds < 10 ? '0' : '') + seconds;
                    // Update the HTML content
                    $('#check_in').html(formattedTime + '<br>Visitor Checked in by me');
                    $('#check_out').html('');
                    var trans = response.data.transtype;
                    if (trans == 1) {
                        $('#call_next').hide();
                        $('#finish').html('');
                        $('#finish').html('<button class="btn w-100"id="finish1" onclick="call_vistor(' + response.data.id + ')" style="background:#52050A;color:#ffffff">Call Visitor</button>');
                    } else if (trans == 3) {
                        $('#call_next').show();
                        $('#finish').html('');
                        $('#finish').html('<button class="btn w-100" id="finish1"onclick="finish_service(' + response.data.id + ')" style="background:#67a270;color:#ffffff">Finish</button>');

                    } else if (trans == 2) {
                        $('#finish1').hide();


                    }
                    else if (trans == 3) {
                        $('#call_next').show();
                        $('#finish').html('');
                        $('#finish').html('<button class="btn w-100" id="finish1"onclick="finish_service(' + response.data.id + ')" style="background:#67a270;color:#ffffff">Finish</button>');

                    }
                    else {

                    }
                    $('.card-2').find('.card-body').toggle();
                    $('.card-1').find('.card-body').toggle();
                    $('.card-3').find('.card-body').toggle();
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        });

    }
</script>
<script>
    function filterTeams() {
        var input, filter, teamMembers, i, txtValue;
        input = document.getElementById('search_user');
        filter = input.value.toLowerCase();
        teamMembers = document.getElementsByClassName('team-member');

        for (i = 0; i < teamMembers.length; i++) {
            txtValue = teamMembers[i].textContent || teamMembers[i].innerText;
            if (txtValue.toLowerCase().indexOf(filter) > -1) {
                teamMembers[i].style.display = "";
                teamMembers[i].style.backgroundColor = "#d1e7dd"; // Highlight matching items
            } else {
                teamMembers[i].style.display = "none";
            }
        }
    }

    function toggleColor(element) {
        // Remove the 'selected' class from all options
        var options = document.getElementsByClassName('industry-option');
        for (var i = 0; i < options.length; i++) {
            options[i].classList.remove('selected');
        }

        // Add the 'selected' class to the clicked element
        element.classList.add('selected');
        var id = $('.selected').attr('data-sel');
        // alert(id);
        $('#user_id').val(id);
    }

    function assign_id() {
        var vistor_id = $('#id').val();
        var user_id = $('#user_id').val();
        var url = "{{ env('APP_URL') }}/api/assign_url";
        if (vistor_id != "") {
            //   alert(user_id+" "+vistor_id);
            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    visit_id: vistor_id,
                    uid: user_id
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                        window.location.reload();
                    } else {
                        $.each(response.errors, function(key, value) {
                            Swal.fire({
                                position: 'center',
                                icon: 'error',
                                title: value,
                                showConfirmButton: false,
                                timer: 3500,
                                showCloseButton: true
                            });
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('An error occurred while submitting the form');
                    console.error(xhr.responseText);
                }
            });
        } else {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: 'first select the visitor',
                showConfirmButton: false,
                timer: 3500,
                showCloseButton: true
            });
        }
    }

    function delete_visitor() {
        var vistor_id = $('#id').val();
        var user_id = "{{auth()->user()->id}}";
        var url = "{{ env('APP_URL') }}/api/delete_url";
        if (vistor_id != "") {
            //   alert(user_id+" "+vistor_id);
            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    visit_id: vistor_id,
                    uid: user_id
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                        window.location.reload();
                    } else {
                        $.each(response.errors, function(key, value) {
                            Swal.fire({
                                position: 'center',
                                icon: 'error',
                                title: value,
                                showConfirmButton: false,
                                timer: 3500,
                                showCloseButton: true
                            });
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('An error occurred while submitting the form');
                    console.error(xhr.responseText);
                }
            });
        } else {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: 'first select the visitor',
                showConfirmButton: false,
                timer: 3500,
                showCloseButton: true
            });
        }
    }
</script>
<script>
    $(document).ready(function() {
        $('.card-1, .card-2, .card-3').on('click', function() {
            $(this).find('.card-body').toggle();

            // Toggle the chevron icon
            var icon = $(this).find('i');
            if (icon.hasClass('fa-chevron-down')) {
                icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
            } else {
                icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
            }
        });
    });
</script>
<script>
    function addvistor() {

        var lid = "{{$sess_id}}";
        var user_name = "{{ auth()->user()->fname . ' ' . auth()->user()->lname }}";
        var uid = "{{auth()->user()->id}}";
        var u_main_id = "{{auth()->user()->main_id}}";
        var desk_name = "{{!empty($dsksessionId) ? $dsksessionId : 0}}";
        var data = $('#vistoradd').serialize();
        var url = "{{ env('APP_URL') }}/api/services_saves";
        data += "&uid=" + uid;
        data += "&lid=" + lid;
        data += "&u_main_id=" + u_main_id;
        data += "&desk_id=" + desk_name;
        data += "&user_name=" + user_name;


        $.ajax({
            type: 'POST',
            url: url,
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: response.message,
                        showConfirmButton: false,
                        timer: 3500,
                        showCloseButton: true
                    });
                    window.location.reload();
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        });

    }
</script>
<script>
    var desks = "{{!empty($dsksessionId) ? $dsksessionId : 0}}";
    if (desks == 0) {
        setsec();
    } else {

    }
</script>
<script>
    $(".waiting").click(function() {
        var id = $(this).attr('id');
        var url = "{{ env('APP_URL') }}/api/services_call";
        $.ajax({
            type: 'POST',
            url: url,
            data: {
                id: id
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {

                    $('#mobile_num_v').html(response.data.mobile);
                    $('#services').html(response.data.service_name);
                    $('#fname_v').val(response.data.f_name);
                    $('#lname_v').val(response.data.l_name);
                    $('#mobile_v').val(response.data.mobile);
                    $('#service_v').val(response.data.service);
                    $('#label_v').val(response.data.web_link);
                    $('#id').val(response.data.id);
                    var time_v = new Date(response.data.date_time); // Parse the date string
                    var current_time = new Date();
                    var diff_ms = current_time - time_v;
                    var diff_hours = Math.floor(diff_ms / 3600000); // Convert milliseconds to hours
                    var diff_mins = Math.floor((diff_ms % 3600000) / 60000); // Remaining minutes after hours
                    $('#timing').html('<i class="fa-regular fa-clock"></i>' + diff_hours + ' hr ' + diff_mins + ' min ');
                    $('.name_v').html(response.data.f_name + " " + response.data.l_name);
                    $('#timing2').html('<i class="fa-regular fa-clock"></i>' + diff_hours + ' hr ' + diff_mins + ' min ');
                    var checkInAt = new Date(response.data.check_in_at);
                    // Extract the hours, minutes, and seconds
                    var hours = checkInAt.getHours();
                    var minutes = checkInAt.getMinutes();
                    var seconds = checkInAt.getSeconds();
                    // Format the time as HH:MM:SS
                    var formattedTime =
                        (hours < 10 ? '0' : '') + hours + ':' +
                        (minutes < 10 ? '0' : '') + minutes + ':' +
                        (seconds < 10 ? '0' : '') + seconds;
                    // Update the HTML content
                    $('#check_in').html(formattedTime + '<br>Visitor Checked in by me');
                    $('#check_out').html('');
                    var trans = response.data.transtype;
                    if (trans == 1) {
                        $('#finish').html('');
                        $('#call_next').hide();
                        $('#finish').html('<button class="btn w-100"id="finish1" onclick="call_vistor(' + response.data.id + ')" style="background:#52050A;color:#ffffff">Call Visitor</button>');
                    } else if (trans == 3) {
                        $('#call_next').show();
                        $('#finish').html('');
                        $('#finish').html('<button class="btn w-100" id="finish1"onclick="finish_service(' + response.data.id + ')" style="background:#67a270;color:#ffffff">Finish</button>');

                    } else if (trans == 2) {
                        $('#finish1').hide();


                    } else {

                    }
                    $('.card-2').find('.card-body').toggle();
                    $('.card-1').find('.card-body').toggle();
                    $('.card-3').find('.card-body').toggle();
                    // console.log(response.data);
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        });
    });
</script>
<script>
    $('.menu-service').addClass('current-menu-active');
    // Wait for the document to be ready
    $(document).ready(function() {
        // Initially show the first row and hide the second row
        $(".first").show();
        $(".second").hide();
    });
    // When a button in the first row is clicked
    function nextdesign() {
        // Hide the first row and show the second row
        $("#exampleModal5").modal('hide');
        $(".first").hide();
        $(".second").show();
    };

    // When a button in the second row is clicked
</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() {
    var desk_session_id = "{{ session('desk_id') }}";
    // alert(desk_session_id);

    if (desk_session_id) {  // No need for !empty() in JavaScript, just check the value

    }else{
        // alert("Desk session id is empty");
        setsecdesk();
    }

    $('#deskchange').on('change', function() {
        setsecdesk();
    });
});
    $(document).ready(function() {
        // alert('desk');
        var secession_value = "{{!empty($dsksessionId) ? $dsksessionId : ''}}";
        // alert(secession_value);
        if (secession_value == "") {
            var drop = $("#deskchange").val();
            // alert(drop);
            if (drop != "") {
                // setsecdesk()
            }
        }
    });

    function setsecdesk() {
        var desk_id = $("#deskchange").val();
        var deskName = $("#deskchange").find('option:selected').text();

        $.ajax({
            url: "{{ route('update.desk.session') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                desk_id: desk_id,
                deskName: deskName
            },
            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();

        });
        var service_session_id="{{session('service_id')}}";
        if(service_session_id){

        }else{
            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>
<script>
    function finish_service() {
        var data = $('#finish_form').serialize();


        var lid = "{{$sess_id}}";
        var user_name = "{{ auth()->user()->fname . ' ' . auth()->user()->lname }}";
        var uid = "{{auth()->user()->id}}";
        var u_main_id = "{{auth()->user()->main_id}}";
        var desk_name = "{{!empty($dsksessionId) ? $dsksessionId : 0}}";

        var url = "{{ env('APP_URL') }}/api/finish_saves";
        data += "&uid=" + uid;
        data += "&lid=" + lid;
        data += "&u_main_id=" + u_main_id;
        data += "&desk_id=" + desk_name;
        data += "&user_name=" + user_name;


        $.ajax({
            type: 'POST',
            url: url,
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: response.message,
                        showConfirmButton: false,
                        timer: 3500,
                        showCloseButton: true
                    });
                    window.location.reload();
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        });

    }
</script>
<script>
    $(".complete").click(function() {
        var id = $(this).attr('id');
        var url = "{{ env('APP_URL') }}/api/services_call";
        $.ajax({
            type: 'POST',
            url: url,
            data: {
                id: id
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {

                    $('#mobile_num_v').html(response.data.mobile);
                    $('#services').html(response.data.service_name);
                    $('#fname_v').val(response.data.f_name);
                    $('#lname_v').val(response.data.l_name);
                    $('#mobile_v').val(response.data.mobile);
                    $('#service_v').val(response.data.service);
                    $('#label_v').val(response.data.web_link);
                    $('#id').val(response.data.id);
                    $('#finish1').hide();
                    var time_v = new Date(response.data.date_time); // Parse the date string
                    // alert(time_v);
                    var current_time = new Date();
                    // alert(current_time);
                    var diff_ms = current_time - time_v;

                    var diff_hours = Math.floor(diff_ms / 3600000); // Convert milliseconds to hours
                    var diff_mins = Math.floor((diff_ms % 3600000) / 60000); // Remaining minutes after hours
                    $('#timing').html('<i class="fa-regular fa-clock"></i>' + diff_hours + ' hr ' + diff_mins + ' min ');
                    $('.name_v').html(response.data.f_name + " " + response.data.l_name);
                    $('#timing2').html('<i class="fa-regular fa-clock"></i>' + diff_hours + ' hr ' + diff_mins + ' min ');
                    var checkInAt = new Date(response.data.check_in_at);
                    var checkOut = new Date(response.data.check_out_at);
                    // Extract the hours, minutes, and seconds
                    var hours = checkInAt.getHours();
                    var minutes = checkInAt.getMinutes();
                    var seconds = checkInAt.getSeconds();

                    // Format the time as HH:MM:SS
                    var formattedTime =
                        (hours < 10 ? '0' : '') + hours + ':' +
                        (minutes < 10 ? '0' : '') + minutes + ':' +
                        (seconds < 10 ? '0' : '') + seconds;
                    var hours1 = checkOut.getHours();
                    var minutes1 = checkOut.getMinutes();
                    var seconds1 = checkOut.getSeconds();

                    var formattedTime1 =
                        (hours1 < 10 ? '0' : '') + hours1 + ':' +
                        (minutes1 < 10 ? '0' : '') + minutes1 + ':' +
                        (seconds1 < 10 ? '0' : '') + seconds1;
                    // Update the HTML content
                    $('#check_in').html(formattedTime + '<br>Visitor Checked in by me');
                    $('#check_out').html(formattedTime1 + '<br>Visitor called by me');

                    console.log(response.data);
                    $('.card-3').find('.card-body').toggle();
                    $('.card-2').find('.card-body').toggle();
                    $('.card-1').find('.card-body').toggle();
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        });
    });
</script>
<script>
    function call_vistor(id) {
        // alert(id);
        var data = $('#finish_form').serialize();
        var id = id;
        var lid = "{{$sess_id}}";
        var user_name = "{{ auth()->user()->fname . ' ' . auth()->user()->lname }}";
        var uid = "{{auth()->user()->id}}";
        var u_main_id = "{{auth()->user()->main_id}}";
        var desk_name = "{{!empty($dsksessionId) ? $dsksessionId : 0}}";


        data += "&uid=" + uid;
        data += "&lid=" + lid;
        data += "&u_main_id=" + u_main_id;
        data += "&desk_id=" + desk_name;
        data += "&user_name=" + user_name;

        var url = "{{ env('APP_URL') }}/api/services_now";
        $.ajax({
            type: 'POST',
            url: url,
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    window.location.reload();
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        });
    }
</script>
<script>
    function no_show(){
        var data = $('#finish_form').serialize();
        var id = id;
        var lid = "{{$sess_id}}";
        var user_name = "{{ auth()->user()->fname . ' ' . auth()->user()->lname }}";
        var uid = "{{auth()->user()->id}}";
        var u_main_id = "{{auth()->user()->main_id}}";
        var desk_name = "{{!empty($dsksessionId) ? $dsksessionId : 0}}";
        var service="{{$active_service}}";

        data += "&uid=" + uid;
        data += "&lid=" + lid;
        data += "&u_main_id=" + u_main_id;
        data += "&desk_id=" + desk_name;
        data += "&user_name=" + user_name;
        data +="&service="+service;
        var url = "{{ env('APP_URL') }}/api/no_show";
        $.ajax({
            type: 'POST',
            url: url,
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: response.message,
                        showConfirmButton: false,
                        timer: 3500,
                        showCloseButton: true
                    });
                    callnext_api(response.api_values);
                    noshow_api(response.no_show);
                    // window.location.reload();
                    $('#mobile_num_v').html(response.data.mobile);
                    $('#services').html(response.data.service_name);
                    $('#fname_v').val(response.data.f_name);
                    $('#lname_v').val(response.data.l_name);
                    $('#mobile_v').val(response.data.mobile);
                    $('#service_v').val(response.data.service);
                    $('#label_v').val(response.data.web_link);
                    $('#id').val(response.data.id);
                    var time_v = new Date(response.data.date_time); // Parse the date string
                    var current_time = new Date();
                    var diff_ms = current_time - time_v;
                    var diff_hours = Math.floor(diff_ms / 3600000); // Convert milliseconds to hours
                    var diff_mins = Math.floor((diff_ms % 3600000) / 60000); // Remaining minutes after hours
                    $('#timing').html('<i class="fa-regular fa-clock"></i>' + diff_hours + ' hr ' + diff_mins + ' min ');
                    $('.name_v').html(response.data.f_name + " " + response.data.l_name);
                    $('#timing2').html('<i class="fa-regular fa-clock"></i>' + diff_hours + ' hr ' + diff_mins + ' min ');
                    var checkInAt = new Date(response.data.check_in_at);
                    // Extract the hours, minutes, and seconds
                    var hours = checkInAt.getHours();
                    var minutes = checkInAt.getMinutes();
                    var seconds = checkInAt.getSeconds();
                    // Format the time as HH:MM:SS
                    var formattedTime =
                        (hours < 10 ? '0' : '') + hours + ':' +
                        (minutes < 10 ? '0' : '') + minutes + ':' +
                        (seconds < 10 ? '0' : '') + seconds;
                    // Update the HTML content
                    $('#check_in').html(formattedTime + '<br>Visitor Checked in by me');
                    $('#check_out').html('');
                    var trans = response.data.transtype;
                    if (trans == 1) {
                        $('#call_next').hide();
                        $('#finish').html('');
                        $('#finish').html('<button class="btn w-100"id="finish1" onclick="call_vistor(' + response.data.id + ')" style="background:#52050A;color:#ffffff">Call Visitor</button>');
                    } else if (trans == 3) {
                        $('#call_next').show();
                        $('#finish').html('');
                        $('#finish').html('<button class="btn w-100" id="finish1"onclick="finish_service(' + response.data.id + ')" style="background:#67a270;color:#ffffff">Finish</button>');

                    } else if (trans == 2) {
                        $('#finish1').hide();


                    }
                    else if (trans == 3) {
                        $('#call_next').show();
                        $('#finish').html('');
                        $('#finish').html('<button class="btn w-100" id="finish1"onclick="finish_service(' + response.data.id + ')" style="background:#67a270;color:#ffffff">Finish</button>');

                    }
                    else {

                    }
                    $('.card-2').find('.card-body').toggle();
                    $('.card-1').find('.card-body').toggle();
                    $('.card-3').find('.card-body').toggle();
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        });

    }
</script>
<script>
    function service_closed(){
        var lid = "{{$sess_id}}";
        var desk_name = "{{!empty($dsksessionId) ? $dsksessionId : 0}}";
        var service="{{$active_service}}";
        $.ajax({
            type: 'POST',
            url:"{{ env('APP_URL') }}/api/service_closed",
            data: {lid:lid,desk_name:desk_name,service:service},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // window.location.reload();/
                    sevice_closed_api(response.data,response.message);
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        });
    }
    function service_paused(){
        var lid = "{{$sess_id}}";
        var desk_name = "{{!empty($dsksessionId) ? $dsksessionId : 0}}";
        var service="{{$active_service}}";
        $.ajax({
            type: 'POST',
            url:"{{ env('APP_URL') }}/api/service_paused",
            data: {lid:lid,desk_name:desk_name,service:service},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // window.location.reload();/
                    sevice_paused_api(response.data,response.message);
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        }); 
    }
    
    function service_started(){
        var lid = "{{$sess_id}}";
        var desk_name = "{{!empty($dsksessionId) ? $dsksessionId : 0}}";
        var service="{{$active_service}}";
        $.ajax({
            type: 'POST',
            url:"{{ env('APP_URL') }}/api/service_started",
            data: {lid:lid,desk_name:desk_name,service:service},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // window.location.reload();/
                    sevice_started_api(response.data,response.message);
                } else {
                    $.each(response.errors, function(key, value) {
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: value,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('An error occurred while submitting the form');
                console.error(xhr.responseText);
            }
        }); 
    }
    function sevice_closed_api(valuess,msg){
        let data3 = {
        values: valuess,
        message: msg
    };

    let jsonData = JSON.stringify(data3);

    $.ajax({
        type: 'POST',
        url: 'https://904a64ce-efe4-413c-a5ff-afa4feab7a28-00-g2b8rlu0pjx1.pike.replit.dev:3000/service_closed',

        data: jsonData,
        contentType: 'application/json',
        success: function(response) {
            console.log('Successfully sent data to client URL');
            console.log(response);
        },
        error: function(xhr, status, error) {
            console.error('An error occurred while sending data to client URL');
            console.error(xhr.responseText);
        }
    });
    }
    function sevice_started_api(valuesss,msgs){
        let data4 = {
        values: valuesss,
        message: msgs
    };

    let jsonData4 = JSON.stringify(data4);

    $.ajax({
        type: 'POST',
        url: 'https://904a64ce-efe4-413c-a5ff-afa4feab7a28-00-g2b8rlu0pjx1.pike.replit.dev:3000/service_open',
        data: jsonData4,
        contentType: 'application/json',
        success: function(response) {
            console.log('Successfully sent data to client URL');
            console.log(response);
        },
        error: function(xhr, status, error) {
            console.error('An error occurred while sending data to client URL');
            console.error(xhr.responseText);
        }
    });
    }
    function sevice_paused_api(pvaluesss,pmsgs){
        let data8 = {
            values: pvaluesss,
            message: pmsgs
    };

    let jsonData8 = JSON.stringify(data8);

    $.ajax({
        type: 'POST',
        url: 'https://904a64ce-efe4-413c-a5ff-afa4feab7a28-00-g2b8rlu0pjx1.pike.replit.dev:3000/service_paused',
        data: jsonData8,
        contentType: 'application/json',
        success: function(response) {
            console.log('Successfully sent data to client URL');
            console.log(response);
        },
        error: function(xhr, status, error) {
            console.error('An error occurred while sending data to client URL');
            console.error(xhr.responseText);
        }
    });
    }
    function noshow_api(data9){
       

    let jsonData9 = JSON.stringify(data9);

    $.ajax({
        type: 'POST',
        url: 'https://904a64ce-efe4-413c-a5ff-afa4feab7a28-00-g2b8rlu0pjx1.pike.replit.dev:3000/no_show',
        data: jsonData9,
        contentType: 'application/json',
        success: function(response) {
            console.log('Successfully sent data to client URL');
            console.log(response);
        },
        error: function(xhr, status, error) {
            console.error('An error occurred while sending data to client URL');
            console.error(xhr.responseText);
        }
    });
    }
</script>
@endsection