@extends('admin.layouts.leadManagement')
@section('title')
    slot
@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css?v={{ env('CRM_VERSION') }}"
        rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('backend') }}/lead-management/css/lead.css?v={{ env('CRM_VERSION') }}">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css?v={{ env('CRM_VERSION') }}" />
    <link rel="shortcut icon" href="/uploads/app/logo/3OtxeXcMv5lhQzNLERhnmclPXorAN4msV8upXbCm.png">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{ env('CRM_VERSION') }}" />

    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />

    <style>
        /* Define the hover highlight color for the table row */
        .hoverTable tr:hover {
            background-color: #ece8fe;
        }

        .inactive-follow {
            border: 1px solid #da1c1c;
            color: #da1c1c;
            background: #FFFFFF;
            /* margin-right: 15px; */
        }

        body.zoom-80 {
            zoom: 70%;
        }

        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background: #a4c0db;
            color: #747579;
        }

        .select2-container--default .select2-dropdown .select2-results .select2-results__option {
            color: #000000;
            padding: 10px;
        }


        .select2-container--default .select2-dropdown .select2-results .select2-results__option {
            color: #000000 !important;
            padding: 10px;
        }

        .select2-container--default .select2-dropdown .select2-results .select2-results__option {
            color: #747579;
            padding: 10px;
        }

        .select2-container--default .select2-results__option--selected {
            background: #b4daff;
            color: #000000;
        }
        .link {
            max-width: 200px;
            overflow-wrap: break-word;
        }
    </style>
@endsection
@section('content')
    @php
        @$slot_edit = userCan('slot.update');
        @$slot_delete = userCan('slot.delete');
    @endphp
    {{-- <link rel="stylesheet" href="{{ asset('backend') }}/lead-management/css/lead.css?v={{env('CRM_VERSION')}}"> --}}

    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{env('CRM_VERSION')}}" > --}}
    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css?v={{env('CRM_VERSION')}}" > --}}
    <style>
        .loader {
            z-index: 1000;
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }

        .hide_data {
            display: inline;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* background:white; */
            height: 100vh;
            width: 100%;
            z-index: 1000;

        }

        #followps_show:hover {
            display: inline;
        }

        .comment:hover>.followps_show {
            display: inline;
        }

        #formSubmit {
            display: none;
            margin-top: 20px;
        }

        .main .btns {
            margin-bottom: -1px;
        }
    </style>
    <script>
        // $(".overlay").show(); 

        // $(".overlay").css("background", "#fff");

        // var ele_var = document.querySelectorAll('body');
        // ele_var.forEach((element) => {
        //     element.classList.add('no-scroll');
        // });

        // $(document).ready(function() {
        //     var overlayElement = document.getElementsByClassName('yourClassName')[0];

        //     // Set background color for overlayElement with opacity
        //     overlayElement.style.background = "black !important";
        // });
    </script>




    <style>
        .select2-dropdown {
            width: 300px !important;
        }

        .create_btn {
            font-family: "Roboto Medium";
            border: 1px solid #066AC9;
            color: #066AC9;
            margin-left: 10px;
            display: inline-block;
            font-size: 0.9375rem;
            line-height: 18px;
            text-align: center;
            border-radius: 5px;
            padding: 6px 18px;
        }

        .create_btn:hover {
            font-family: "Roboto Medium";
            border: 1px solid #066AC9;
            background: #066AC9;
            color: white;
            margin-left: 10px;
            display: inline-block;
            font-size: 0.9375rem;
            line-height: 18px;
            text-align: center;
            border-radius: 5px;
            padding: 6px 18px;
        }
    </style>
    <script>
        // $('#assign_to').select2({
        //     width: '100%',
        //     closeOnSelect: false
        // })
    </script>

    <div class="hide_data">

    </div>
    <div class="main">
        <div class="top mb-3">
            <div class="head-detail">
                <p class="head">slot ({{ @$slot_count }})</p>
                {{-- <p class="values">
                <div class="button-box">
                <a href="{{ route('admin.leadManagement', ['values' => 'notDropped' ,'assign_to' => request('assign_to')]) }}"><span class="label active">Active: <span id="activeTotal">--</span></span></a>
                <div class="tooltip-box active-lead"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.5 15C11.6325 15 15 11.6325 15 7.5C15 3.3675 11.6325 0 7.5 0C3.3675 0 0 3.3675 0 7.5C0 11.6325 3.3675 15 7.5 15ZM8.0625 10.5C8.0625 10.8075 7.8075 11.0625 7.5 11.0625C7.1925 11.0625 6.9375 10.8075 6.9375 10.5V6.75C6.9375 6.4425 7.1925 6.1875 7.5 6.1875C7.8075 6.1875 8.0625 6.4425 8.0625 6.75V10.5ZM6.81 4.215C6.8475 4.1175 6.9 4.0425 6.9675 3.9675C7.0425 3.9 7.125 3.8475 7.215 3.81C7.305 3.7725 7.4025 3.75 7.5 3.75C7.5975 3.75 7.695 3.7725 7.785 3.81C7.875 3.8475 7.9575 3.9 8.0325 3.9675C8.1 4.0425 8.1525 4.1175 8.19 4.215C8.2275 4.305 8.25 4.4025 8.25 4.5C8.25 4.5975 8.2275 4.695 8.19 4.785C8.1525 4.875 8.1 4.9575 8.0325 5.0325C7.9575 5.1 7.875 5.1525 7.785 5.19C7.605 5.265 7.395 5.265 7.215 5.19C7.125 5.1525 7.0425 5.1 6.9675 5.0325C6.9 4.9575 6.8475 4.875 6.81 4.785C6.7725 4.695 6.75 4.5975 6.75 4.5C6.75 4.4025 6.7725 4.305 6.81 4.215Z" fill="#B9BCC8"/>
                    </svg>
                <span class="tooltip-text">Active Leads.</span></div>
                </div>

                <div class="button-box">
                <a href="{{ route('admin.leadManagement') }}"><span class=" label total">Total: <span>{{ @$totalCount }}</span></span></a>
                <div class="tooltip-box total-count"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.5 15C11.6325 15 15 11.6325 15 7.5C15 3.3675 11.6325 0 7.5 0C3.3675 0 0 3.3675 0 7.5C0 11.6325 3.3675 15 7.5 15ZM8.0625 10.5C8.0625 10.8075 7.8075 11.0625 7.5 11.0625C7.1925 11.0625 6.9375 10.8075 6.9375 10.5V6.75C6.9375 6.4425 7.1925 6.1875 7.5 6.1875C7.8075 6.1875 8.0625 6.4425 8.0625 6.75V10.5ZM6.81 4.215C6.8475 4.1175 6.9 4.0425 6.9675 3.9675C7.0425 3.9 7.125 3.8475 7.215 3.81C7.305 3.7725 7.4025 3.75 7.5 3.75C7.5975 3.75 7.695 3.7725 7.785 3.81C7.875 3.8475 7.9575 3.9 8.0325 3.9675C8.1 4.0425 8.1525 4.1175 8.19 4.215C8.2275 4.305 8.25 4.4025 8.25 4.5C8.25 4.5975 8.2275 4.695 8.19 4.785C8.1525 4.875 8.1 4.9575 8.0325 5.0325C7.9575 5.1 7.875 5.1525 7.785 5.19C7.605 5.265 7.395 5.265 7.215 5.19C7.125 5.1525 7.0425 5.1 6.9675 5.0325C6.9 4.9575 6.8475 4.875 6.81 4.785C6.7725 4.695 6.75 4.5975 6.75 4.5C6.75 4.4025 6.7725 4.305 6.81 4.215Z" fill="#B9BCC8"/>
                    </svg><span class="tooltip-text">Total Leads.</span></div>
                </div>

                <div class="button-box">
                <a href="{{ route('admin.leadManagement', ['followUp' => 'inactive' ,'assign_to' => request('assign_to')]+ request()->all()) }}"><span class="label inactive-follow"> Ignore Leads:  <span id="inactiveFollowCount">--</span></span></a>
                <div class="tooltip-box ignore-leads"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.5 15C11.6325 15 15 11.6325 15 7.5C15 3.3675 11.6325 0 7.5 0C3.3675 0 0 3.3675 0 7.5C0 11.6325 3.3675 15 7.5 15ZM8.0625 10.5C8.0625 10.8075 7.8075 11.0625 7.5 11.0625C7.1925 11.0625 6.9375 10.8075 6.9375 10.5V6.75C6.9375 6.4425 7.1925 6.1875 7.5 6.1875C7.8075 6.1875 8.0625 6.4425 8.0625 6.75V10.5ZM6.81 4.215C6.8475 4.1175 6.9 4.0425 6.9675 3.9675C7.0425 3.9 7.125 3.8475 7.215 3.81C7.305 3.7725 7.4025 3.75 7.5 3.75C7.5975 3.75 7.695 3.7725 7.785 3.81C7.875 3.8475 7.9575 3.9 8.0325 3.9675C8.1 4.0425 8.1525 4.1175 8.19 4.215C8.2275 4.305 8.25 4.4025 8.25 4.5C8.25 4.5975 8.2275 4.695 8.19 4.785C8.1525 4.875 8.1 4.9575 8.0325 5.0325C7.9575 5.1 7.875 5.1525 7.785 5.19C7.605 5.265 7.395 5.265 7.215 5.19C7.125 5.1525 7.0425 5.1 6.9675 5.0325C6.9 4.9575 6.8475 4.875 6.81 4.785C6.7725 4.695 6.75 4.5975 6.75 4.5C6.75 4.4025 6.7725 4.305 6.81 4.215Z" fill="#B9BCC8"/>
                    </svg><span class="tooltip-text">Leads that are not connected from past 7 days.</span></div>
                </div>

                <div class="button-box">
                <a href="{{ route('admin.leadManagement', ['followUp' => 'no_followUp' ,'assign_to' => request('assign_to')]+ request()->all()) }}"><span class=" label not-follow">Not Followed: <span id="myNonfollowedcount">--</span></span></a>
                <div class="tooltip-box not-followed"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.5 15C11.6325 15 15 11.6325 15 7.5C15 3.3675 11.6325 0 7.5 0C3.3675 0 0 3.3675 0 7.5C0 11.6325 3.3675 15 7.5 15ZM8.0625 10.5C8.0625 10.8075 7.8075 11.0625 7.5 11.0625C7.1925 11.0625 6.9375 10.8075 6.9375 10.5V6.75C6.9375 6.4425 7.1925 6.1875 7.5 6.1875C7.8075 6.1875 8.0625 6.4425 8.0625 6.75V10.5ZM6.81 4.215C6.8475 4.1175 6.9 4.0425 6.9675 3.9675C7.0425 3.9 7.125 3.8475 7.215 3.81C7.305 3.7725 7.4025 3.75 7.5 3.75C7.5975 3.75 7.695 3.7725 7.785 3.81C7.875 3.8475 7.9575 3.9 8.0325 3.9675C8.1 4.0425 8.1525 4.1175 8.19 4.215C8.2275 4.305 8.25 4.4025 8.25 4.5C8.25 4.5975 8.2275 4.695 8.19 4.785C8.1525 4.875 8.1 4.9575 8.0325 5.0325C7.9575 5.1 7.875 5.1525 7.785 5.19C7.605 5.265 7.395 5.265 7.215 5.19C7.125 5.1525 7.0425 5.1 6.9675 5.0325C6.9 4.9575 6.8475 4.875 6.81 4.785C6.7725 4.695 6.75 4.5975 6.75 4.5C6.75 4.4025 6.7725 4.305 6.81 4.215Z" fill="#B9BCC8"/>
                </svg><span class="tooltip-text">New assigned leads on which you have not marked any follow-up yet.</span></div>
                </div>

              
                <div class="button-box">
                <a href="{{ route('admin.leadManagement', ['TATfiter' => 'crossed' ,'assign_to' => request('assign_to')]+ request()->all()) }}"><span class="label inactive-follow"> TAT Crossed:  <span id="crossedTATCount">--</span></span></a>
                <div class="tooltip-box ignore-leads"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.5 15C11.6325 15 15 11.6325 15 7.5C15 3.3675 11.6325 0 7.5 0C3.3675 0 0 3.3675 0 7.5C0 11.6325 3.3675 15 7.5 15ZM8.0625 10.5C8.0625 10.8075 7.8075 11.0625 7.5 11.0625C7.1925 11.0625 6.9375 10.8075 6.9375 10.5V6.75C6.9375 6.4425 7.1925 6.1875 7.5 6.1875C7.8075 6.1875 8.0625 6.4425 8.0625 6.75V10.5ZM6.81 4.215C6.8475 4.1175 6.9 4.0425 6.9675 3.9675C7.0425 3.9 7.125 3.8475 7.215 3.81C7.305 3.7725 7.4025 3.75 7.5 3.75C7.5975 3.75 7.695 3.7725 7.785 3.81C7.875 3.8475 7.9575 3.9 8.0325 3.9675C8.1 4.0425 8.1525 4.1175 8.19 4.215C8.2275 4.305 8.25 4.4025 8.25 4.5C8.25 4.5975 8.2275 4.695 8.19 4.785C8.1525 4.875 8.1 4.9575 8.0325 5.0325C7.9575 5.1 7.875 5.1525 7.785 5.19C7.605 5.265 7.395 5.265 7.215 5.19C7.125 5.1525 7.0425 5.1 6.9675 5.0325C6.9 4.9575 6.8475 4.875 6.81 4.785C6.7725 4.695 6.75 4.5975 6.75 4.5C6.75 4.4025 6.7725 4.305 6.81 4.215Z" fill="#B9BCC8"/>
                    </svg><span class="tooltip-text">TAT (Turnaround Time) crossed the deadline.</span></div>
                </div>

                @php
                    $ltstartDate = date('m/d/Y', strtotime('-30 days'));
                    $ltendDate = date('m/d/Y');
                    $levelAssessmentTestDateRange = urldecode($ltstartDate . ' - ' . $ltendDate);
                @endphp
                <div class="button-box">
                <a href="{{ route('admin.leadManagement', ['services_value[]' => '12', 'levelAssessmentTestStart' => '1', 'daterangeCreated' => $levelAssessmentTestDateRange,'assign_to' => request('assign_to')]) }}"><span class="label not-follow"> Test Start:  <span id="levelAssessmentTestStart">--</span></span></a>
                <div class="tooltip-box not-followed"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.5 15C11.6325 15 15 11.6325 15 7.5C15 3.3675 11.6325 0 7.5 0C3.3675 0 0 3.3675 0 7.5C0 11.6325 3.3675 15 7.5 15ZM8.0625 10.5C8.0625 10.8075 7.8075 11.0625 7.5 11.0625C7.1925 11.0625 6.9375 10.8075 6.9375 10.5V6.75C6.9375 6.4425 7.1925 6.1875 7.5 6.1875C7.8075 6.1875 8.0625 6.4425 8.0625 6.75V10.5ZM6.81 4.215C6.8475 4.1175 6.9 4.0425 6.9675 3.9675C7.0425 3.9 7.125 3.8475 7.215 3.81C7.305 3.7725 7.4025 3.75 7.5 3.75C7.5975 3.75 7.695 3.7725 7.785 3.81C7.875 3.8475 7.9575 3.9 8.0325 3.9675C8.1 4.0425 8.1525 4.1175 8.19 4.215C8.2275 4.305 8.25 4.4025 8.25 4.5C8.25 4.5975 8.2275 4.695 8.19 4.785C8.1525 4.875 8.1 4.9575 8.0325 5.0325C7.9575 5.1 7.875 5.1525 7.785 5.19C7.605 5.265 7.395 5.265 7.215 5.19C7.125 5.1525 7.0425 5.1 6.9675 5.0325C6.9 4.9575 6.8475 4.875 6.81 4.785C6.7725 4.695 6.75 4.5975 6.75 4.5C6.75 4.4025 6.7725 4.305 6.81 4.215Z" fill="#B9BCC8"/>
                    </svg><span class="tooltip-text">Filtering records for Level Assessment Test started within the last 30 days from the attempted date.</span></div>
                </div>


                <img src="{{ asset('backend') }}/loader/three-dot-loader.gif" style="height: 25px;display:none" class="countloader">
            </p> --}}
            </div>

            {{-- <form  action="{{ route('admin.leadManagement') }}" class="search-box" method="GET" style="display: contents;">
            <div class="head-detail">
                <p class="values">
                    <div class="button-box">
                    
                        <div class="tooltip-box ignore-leads" style="margin-top: :10px;"><svg style="    margin-top: 10px;" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.5 15C11.6325 15 15 11.6325 15 7.5C15 3.3675 11.6325 0 7.5 0C3.3675 0 0 3.3675 0 7.5C0 11.6325 3.3675 15 7.5 15ZM8.0625 10.5C8.0625 10.8075 7.8075 11.0625 7.5 11.0625C7.1925 11.0625 6.9375 10.8075 6.9375 10.5V6.75C6.9375 6.4425 7.1925 6.1875 7.5 6.1875C7.8075 6.1875 8.0625 6.4425 8.0625 6.75V10.5ZM6.81 4.215C6.8475 4.1175 6.9 4.0425 6.9675 3.9675C7.0425 3.9 7.125 3.8475 7.215 3.81C7.305 3.7725 7.4025 3.75 7.5 3.75C7.5975 3.75 7.695 3.7725 7.785 3.81C7.875 3.8475 7.9575 3.9 8.0325 3.9675C8.1 4.0425 8.1525 4.1175 8.19 4.215C8.2275 4.305 8.25 4.4025 8.25 4.5C8.25 4.5975 8.2275 4.695 8.19 4.785C8.1525 4.875 8.1 4.9575 8.0325 5.0325C7.9575 5.1 7.875 5.1525 7.785 5.19C7.605 5.265 7.395 5.265 7.215 5.19C7.125 5.1525 7.0425 5.1 6.9675 5.0325C6.9 4.9575 6.8475 4.875 6.81 4.785C6.7725 4.695 6.75 4.5975 6.75 4.5C6.75 4.4025 6.7725 4.305 6.81 4.215Z" fill="#B9BCC8" />
                            </svg><span class="tooltip-text" >
                                
                                Ad:Special Deal<br>
                                Ca:Summer Sale<br>
                                ID = 123456.<br>
                                Easy searching! 🔎✨</span>
                        </div>
                        <div class="single-input search" style="margin: 0px; height:32px;">                                                 
                            <input type="search" name="keyword" class="input-field" value="{{ request('keyword') }}" id="" placeholder="Search by keyword"
                                aria-label="date">
                            <button class="search-btn"  type="submit" aria-label="Search" style="line-height: 14px;">
                                <svg width="18" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M17.7043 16.2848L14.3054 12.8958C15.402 11.4988 15.9971 9.77351 15.9948 7.99743C15.9948 6.41569 15.5258 4.86947 14.647 3.5543C13.7683 2.23913 12.5192 1.21408 11.0579 0.608771C9.59657 0.00346512 7.98855 -0.15491 6.43721 0.153672C4.88586 0.462254 3.46085 1.22393 2.34239 2.34239C1.22393 3.46085 0.462254 4.88586 0.153672 6.43721C-0.15491 7.98855 0.00346512 9.59657 0.608771 11.0579C1.21408 12.5192 2.23913 13.7683 3.5543 14.647C4.86947 15.5258 6.41569 15.9948 7.99743 15.9948C9.77351 15.9971 11.4988 15.402 12.8958 14.3054L16.2848 17.7043C16.3777 17.798 16.4883 17.8724 16.6101 17.9231C16.7319 17.9739 16.8626 18 16.9945 18C17.1265 18 17.2572 17.9739 17.379 17.9231C17.5008 17.8724 17.6114 17.798 17.7043 17.7043C17.798 17.6114 17.8724 17.5008 17.9231 17.379C17.9739 17.2572 18 17.1265 18 16.9945C18 16.8626 17.9739 16.7319 17.9231 16.6101C17.8724 16.4883 17.798 16.3777 17.7043 16.2848ZM1.99936 7.99743C1.99936 6.81112 2.35114 5.65146 3.01022 4.66508C3.66929 3.6787 4.60606 2.90991 5.70206 2.45593C6.79807 2.00196 8.00408 1.88317 9.16759 2.11461C10.3311 2.34605 11.3999 2.91731 12.2387 3.75615C13.0775 4.595 13.6488 5.66375 13.8802 6.82726C14.1117 7.99077 13.9929 9.19678 13.5389 10.2928C13.0849 11.3888 12.3162 12.3256 11.3298 12.9846C10.3434 13.6437 9.18373 13.9955 7.99743 13.9955C6.40664 13.9955 4.88101 13.3636 3.75615 12.2387C2.6313 11.1138 1.99936 9.58821 1.99936 7.99743Z"
                                        fill="white" />
                                </svg>
                
                            </button>
                        </div>
                    </div>
                </p>
            </div>
            
        </form> --}}


            <p class="t-right">
                @if (userCan('slot.create'))
                    <a href="{{ route('slot.create') }}" class="create_btn">Create</a>
                @endif
            </p>

        </div>






        <center><img src="{{ asset('backend') }}/loader/three-dot-loader.gif" style="height: 45px; display: inlione-block;" class="form_load"></center>
        <form id="formSubmit" action="{{ route('slot.index') }}" method="GET">


            <div class="dropdown-list">
                {{--             
                <div class="single-input date-picker-input">
                    <input type="text" class="input-field"  id="daterange" name="daterange" value="{{ request('daterange') }}" placeholder="Date Assign" aria-label="date" readonly>
                </div>
            
                <div class="single-input date-picker-input">
                    <input type="text" class="input-field"  id="daterangeCreated" name="daterangeCreated" value="{{ request('daterangeCreated') }}" placeholder="Date created" aria-label="date" readonly>
                </div>
             --}}





                <div class="single-input date-picker-input" style="width: 200px">
                <input type="text" class="input-field"  id="search" name="search" value="{{ request('search') }}" placeholder="Enter to search " aria-label="date" style="width: 200px">
            </div>

            {{-- <div class="single-input date-picker-input" style="width: 200px">
                <input type="time"  class="input-field"  id="start_time" name="start_time">
            </div>
        
            <!-- End time input field -->
            <div class="single-input date-picker-input" style="width: 200px">
                <input type="time"   class="input-field"  id="end_time" name="end_time">
            </div> --}}


                            
           <button class="filter-btn" style="float: right">
               <svg width="15" height="14" viewBox="0 0 7 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.84375 2.99922L2.6125 4.76797L6.15625 1.23047" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>

                {{-- </div> --}}
            </div>
        </form>
        <div class="btns">
            @if (count(request()->all()) > 0)
                <a href="{{ route('slot.index') }}" class="links">Clear All</a>
            @endif

            {{-- <button type="submit" class="clear-btn">Clear</button> --}}
        </div>
        {{-- {{dd(checkleadManagerEnvRole())}} --}}
        <div class="detail-list" style="width: 100%; overflow:scroll;">
            <!--Desktop-->
            <table class="d-table hoverTable" id="leadManagementTable" >
                <thead>



                    <tr>
                        <th class="table-head">Slot Id</th>
                        <th class="table-head">slot Name</th>
                        <th class="table-head">Sloat Timing</th>
                        <th class="table-head">Status</th>
                        @if (@$slot_edit)
                            <th class="table-head">Action</th>
                        @endif
                        
                    </tr>

                </thead>

                <tbody>

                    @if ($slots->count() > 0)
                    @foreach (@$slots as $slot)
                            
                    <tr>
                        <td class="table-col">{{ @$slot->id }}</td>
                        <td class="table-col">{{ @$slot->name }}</td>
                        <td class="table-col">
                            {{ TimeShowHourseMiniteAmPm(@$slot->time_to) }} to {{ TimeShowHourseMiniteAmPm(@$slot->time_from) }}
                        </td>
                        <td class="table-col">
                           
                            @if($slot->status == "1")
                                <span class="badge badge-success" style="background: green">Active</span>
                            @else
                                <span class="badge badge-danger" style="background: red">Inactive</span>
                            @endif
                        </td>
                        @if (@$slot_edit)
                        <td class="table-col">
                                <a href="{{ route('slot.edit', $slot->id) }}" class="badge" >
                                    <i class="fas fa-edit" style="color: green;"></i>
                                </a>
                            </td>
                        @endif
                    </tr>
                @endforeach
                    @else
                        <tr>
                            <td colspan="12" class="table-col">
                                {{ __('no_data_found') }}
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>

            

        
            {{-- @if ($slots->count()) --}}
            <div class="mt-3 d-flex justify-content-center">
                {{ $slots->onEachSide(1)->links() }}
            </div>
            {{-- @endif --}}
            </div>
    </div>






    


@endsection





@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{ env('CRM_VERSION') }}"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('backend') }}/lead-management/js/common.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="{{ asset('backend') }}/lead-management/js/lead.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js?v={{ env('CRM_VERSION') }}">
    </script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js?v={{ env('CRM_VERSION') }}"></script>

    <script src="{{ asset('tinymce/tinymce.min.js?v=' . env('CRM_VERSION')) }}" referrerpolicy="origin"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
<script>
    @if (session('toaster_type') == 'toast_success')
        toastr.success('{{ session('message') }}');
        {{ session()->forget('toaster_type') }}
    @elseif (session('toaster_type') == 'toast_info')
        toastr.info('{{ session('message') }}');
        {{ session()->forget('toaster_type') }}
    @elseif (session('toaster_type') == 'toast_error')
        toastr.error('{{ session('message') }}');
        {{ session()->forget('toaster_type') }}
    @endif
</script>
    <script>
        $(document).ready(function() {
            $('#formSubmit').show();
            $('.form_load').hide();
            $('.hide_data').hide();



        });

        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

        
    </script>
    @endsection