@extends('student.layouts.main')
@section('main-section')
<link rel="stylesheet" href="{{url('frontend/css/profile.css')}}">

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <style>
            .listHeader {
                display: flex;
                justify-content: space-between;
            }

            .dropdown-submenu {
                position: relative;
            }

            .dropdown-submenu>.dropdown-menu {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px;
                border-radius: 0 6px 6px 6px;
            }

            .dropdown-submenu:hover>.dropdown-menu {
                display: block;
            }

            .dropdown-submenu>a:after {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #ccc;
                margin-top: 5px;
                margin-right: -10px;
            }

            .dropdown-submenu:hover>a:after {
                border-left-color: #fff;
            }

            .dropdown-submenu.pull-left {
                float: none;
            }

            .dropdown-submenu.pull-left>.dropdown-menu {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;
            }

            .btns {
                display: flex;
            }

            .btns button {
                margin: 3px;
            }

            .slotbtn {
                width: 38%;
            }

            .card .card-title {
                margin-bottom: 0;
            }

            #enrollnow {

                margin-top: 4px;
            }
        </style>
        <style>
            .slot {
                width: 50px;
                /* Adjust width as needed */
                /* height: 50px; */
                /* Adjust height as needed */
                border: .5px solid #000;
                /* Border color */
                border-radius: 10%;
                margin: 5px;
                cursor: pointer;
                display: inline-block;
                text-align: center;
                font-size: 11px;
                /* box-shadow: 2px 1px 1px gray; */
            }

            .available {
                background-color: #198754;
                /* Available slot color */
                color: white;
            }

            .booked {
                background-color: #dcdcdc;
                /* Booked slot color */
                /* color: white; */
            }

            .icon-heart{
                fill:red !important;
            }
        </style>

        <div class="page-content">
            <div class="container-fluid">


                {{-- <h3 class="text-center mb-5">Choose your Tutor</h3> --}}
                @if (Session::has('success'))
                    <div class="alert alert-success">{{ Session::get('success') }}</div>
                @endif
                @if (Session::has('fail'))
                    <div class="alert alert-danger">{{ Session::get('fail') }}</div>
                @endif
                <div class="mb-5 listHeader">
                    <div class="tu-sort">
                        <h3>{{ count($tutorlist) }} Search result for tutors</h3>
                        {{-- <div class="tu-sort-right-area">
                            <div class="tu-sortby">
                                <span>Sort by: </span>
                                <div class="tu-select">
                                    <select class="form-control tu-selectv">
                                        <option>Price low to high </option>
                                        <option>Price high to low</option>
                                    </select>
                                </div>
                            </div>
                            <div class="tu-filter-btn">
                                <a class="tu-listbtn active" href="{{url('search-listing.html')}}"><i class="icon icon-list"></i></a>
                                <a class="tu-listbtn" href="{{url('search-listing-two.html')}}"><i class="icon icon-grid"></i></a>
                            </div>
                        </div> --}}
                    </div>
                    <div class="btns">

                        <!-- <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                Sort By
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Price</a>
                                <a class="dropdown-item" href="#">Class</a>
                                <a class="dropdown-item" href="#">Rating</a>
                                <a class="dropdown-item" href="#">Experience</a>

                            </div>
                        </div> -->
                        <div class="dropdown">
                            {{-- <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Sort By
                            </button> --}}
                            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                                <li class="dropdown-submenu">
                                    <a class="dropdown-item" tabindex="-1" href="#">Price</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-item"><a tabindex="-1"
                                                href="{{ url('student/sorttutor/pricing/asc') }}">Ascending</a></li>
                                        <li class="dropdown-item"><a
                                                href="{{ url('student/sorttutor/pricing/desc') }}">Descending</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown-submenu">
                                    <a class="dropdown-item" tabindex="-1" href="#">Class</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-item"><a tabindex="-1"
                                                href="{{ url('student/sorttutor/class/asc') }}">Ascending</a></li>
                                        <li class="dropdown-item"><a
                                                href="{{ url('student/sorttutor/class/desc') }}">Descending</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown-submenu">
                                    <a class="dropdown-item" tabindex="-1" href="#">Rating</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-item"><a tabindex="-1"
                                                href="{{ url('student/sorttutor/rating/asc') }}">Ascending</a></li>
                                        <li class="dropdown-item"><a
                                                href="{{ url('student/sorttutor/rating/desc') }}">Descending</a></li>
                                    </ul>
                                </li>

                                <li class="dropdown-submenu">
                                    <a class="dropdown-item" tabindex="-1" href="#">Experience</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-item"><a tabindex="-1"
                                                href="{{ url('student/sorttutor/experience/asc') }}">Ascending</a></li>
                                        <li class="dropdown-item"><a
                                                href="{{ url('student/sorttutor/experience/desc') }}">Descending</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>


                        {{-- <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#advSearchModal"><i
                                class="fa fa-search"></i> Advance Search
                        </button> --}}
                    </div>
                </div>
               
                <div class="row">
                    <div class="col-xl-8 col-xxl-9">
                        <div class="tu-listinginfo-holder">
                            @if(isset($tutorlist))
                            @foreach ($tutorlist as $tutorlist)
                            <div class="tu-listinginfo">
                                <span class="tu-cardtag"></span>
                                <div class="tu-listinginfo_wrapper">
                                    <div class="tu-listinginfo_title">
                                        <div class="tu-listinginfo-img">
                                            <figure>
                                                <img src="{{ url('images/tutors/profilepics', '/') }}{{ $tutorlist->profile_pic ?? url('images/avatar/default-profile-pic.png') }}" width="60px" alt="imge">
                                            </figure>
                                            <div class="tu-listing-heading">
                                                <h5><a href="/student/tutorprofile/{{ $tutorlist->sub_map_id }}">{{ $tutorlist->name }}</a> <i class="icon icon-check-circle tu-greenclr" data-tippy-trigger="mouseenter" data-tippy-html="#tu-verifed" data-tippy-interactive="true" data-tippy-placement="top"></i></h5>
                                                <div class="tu-listing-location">
                                                    <span>{{$tutorlist->starrating}} <i class="fa-solid fa-star"></i><em></em></span><address><i class="icon icon-map-pin"></i> <span>Exp:</span> {{$tutorlist->experience}}</address>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tu-listinginfo_price">
                                            <span>Starting from:</span>
                                            <h4>£{{$tutorlist->rate}}/hr</h4>
                                        </div>
                                    </div>
                                    <div class="tu-listinginfo_description">
                                        <p>{{ $tutorlist->headline }}</p>
                                    </div>
                                    <div class="tu-listinginfo_service">
                                        <h6>You can get teaching service direct at</h6>
                                        <ul class="tu-service-list">
                                            <li>
                                                <span>
                                                    <i class="icon icon-home tu-greenclr"></i>
                                                    {{ $tutorlist->subject }}
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <i class="icon icon-map-pin tu-blueclr"></i>
                                                    {{$tutorlist->total_classes_done}}+ Lessons Completed
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <i class="icon icon-video tu-orangeclr"></i>
                                                    {{ $tutorlist->total_topics }}+ Topics
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="tu-listinginfo_btn">
                                    @if ($tutorlist->myfav)
                                    <div class="tu-iconheart">
                                        <a href="addfav/{{$tutorlist->tutor_id}}"><img src="{{asset('images/red-heart.png')}}" width="18px" alt=""><span>&nbsp; Remove Favourite</span></a>
                                    </div>
                                    @else
                                        <div class="tu-iconheart">
                                            <a href="addfav/{{$tutorlist->tutor_id}}"><img src="{{asset('images/grey-heart.png')}}" width="18px" alt=""><span>&nbsp; Add Favourite</span></a>
                                        </div>
                                    
                                    
                                    @endif
                                    
                                    <div class="tu-btnarea">
                                       <a href="#booktrial"> <button data-toggle="modal" data-target="#openDemoModal"
                                        class="btn btn-sm btn-primary"
                                        onclick="openDemoModal('{{ $tutorlist->tutor_id }}','{{ $tutorlist->name }}','{{ $tutorlist->subjectid }}','{{ $tutorlist->subject }}')">Trial
                                        Class</button></a>

                                        {{-- <a href="tutormessages/{{ $tutorlist->tutor_id }}"> <button class="btn btn-sm btn-success" id="enrollnow">Chat</button></a> --}}
                                        <a href="tutormessages/{{ $tutorlist->tutor_id }}"> <button class="btn btn-sm btn-primary" id="enrollnow">Chat</button></a>
                                        <a href="enrollnow/{{ $tutorlist->sub_map_id }}"> <button class="btn btn-sm btn-success" id="enrollnow">Enroll Now</button></a>
                                
                                        {{-- <a href="#checkslots" onclick="checkslots('{{$tutorlist->tutor_id}}')" class="btn btn-success">Check Slots</a> --}}
                                        {{-- <a href="{{url('student/searchtutor')}}" class="btn btn-primary">Book Trial</a> --}}
                                        <a href="/student/tutorprofile/{{ $tutorlist->sub_map_id }}" class="tu-primbtn">View full profile</a>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>
                        {{-- <nav class="tu-pagination">
                            <ul>
                                <li class="tu-pagination-prev"><a href="#"><i class="icon icon-chevron-left"></i></a> </li>
                                <li><a href="#">1</a> </li>
                                <li><a href="#">2</a> </li>
                                <li><a href="#">3</a> </li>
                                <li class="active"><a href="#">4</a> </li>
                                <li><a href="#">...</a> </li>
                                <li><a href="#">60</a> </li>
                                <li class="tu-pagination-next"><a href="#"><i class="icon icon-chevron-right"></i></a> </li>
                            </ul>
                        </nav> --}}
                    </div>
                    {{-- Search/Filter --}}
                    <div class="col-xl-4 col-xxl-3">
                        <aside class="tu-asidewrapper">
                            <a href="javascript:void(0)" class="tu-dbmenu"><i class="icon icon-chevron-left"></i></a>
                            <form action="{{route('student.tutoradvs')}}" method="POST">
                                @csrf
                            <div class="tu-aside-menu">
                                <div class="tu-aside-holder">
                                    <div class="tu-asidetitle" data-bs-toggle="collapse" aria-expanded="true">
                                        <h6>Search Tutor</h6>
                                        <div class="input-group">
                                            <input type="text" class="form-control tu-input-field" placeholder="Type Tutor Name..." id="ttsearch" name="ttsearch" style="width: 70%;">
                                            <button class="btn btn-sm btn-success" style="width: 30%;"><i class="fa fa-search"></i> Search</button>
                                        </div>
                                    </div>
                                    
                                    <div class="tu-asidetitle" data-bs-toggle="collapse" data-bs-target="#side2" role="button" aria-expanded="true">
                                        <h6>Education level</h6>
                                    </div>
                                    <div id="side2" class="collapse show">
                                        <div class="tu-aside-content">
                                            <div class="tu-filterselect">
                                                <div class="tu-select">
                                                    <select id="gradelistid" name="gradelistid" data-placeholder="Select education level" data-placeholderinput="Select education level" class="form-control tu-input-field">
                                                        <option label="Select Grade"></option>
                                                        @foreach ( $classes as  $class)
                                                            <option value="{{ $class->id }}">{{ $class->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="tu-filterselect">
                                                <h6>Choose subjects</h6>
                                                <ul class="tu-categoriesfilter">
                                                    @foreach($subjectlist as $subject)
                                                        <li>
                                                            <div class="tu-check tu-checksm">
                                                                <input type="checkbox" id="subject{{ $subject->id }}" name="subjectlistid[]" value="{{ $subject->id }}">
                                                                <label for="subject{{ $subject->id }}">{{ $subject->name }}</label>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                                <div class="show-more">
                                                    <a href="javascript:void(0);" class="tu-readmorebtn tu-show_more">Show all</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tu-aside-holder">
                                    <div class="tu-asidetitle" data-bs-toggle="collapse" data-bs-target="#side3" role="button" aria-expanded="true">
                                        <h5>Price range</h5>
                                    </div>
                                    <div id="side3" class="collapse show">
                                        <div class="tu-aside-content">
                                            <div class="tu-rangevalue" data-bs-target="#tu-rangecollapse" role="list" aria-expanded="false">
                                                <div class="tu-areasizebox">
                                                    <input type="number" class="form-control tu-input-field" step="1" placeholder="Min price" id="tminprice" name="tminprice" />
                                                    <input type="number" class="form-control tu-input-field" step="1" placeholder="Max price" id="tmaxprice" name="tmaxprice" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tu-distanceholder">
                                            <div id="tu-rangecollapse" class="collapse">	
                                                <div class="tu-distance">
                                                    <div id="tu-rangeslider" class="tu-tooltiparrow tu-rangeslider"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tu-aside-holder">
                                    <div class="tu-asidetitle" data-bs-toggle="collapse" data-bs-target="#side1a" role="button" aria-expanded="true">
                                        <h5>Rating</h5>
                                    </div>
                                    <div id="side1a" class="collapse show">
                                        <div class="tu-aside-content">
                                            <ul class="tu-categoriesfilter">
                                                <li>
                                                    <div class="tu-check tu-checksm">
                                                        <input type="checkbox" id="rate" name="rate">
                                                        <label for="rate">
                                                            <span class="tu-stars">
                                                                <span></span>
                                                            </span>
                                                            <em class="tu-totalreview">
                                                                <span>5.0/<em>5.0</em></span>
                                                            </em>  
                                                        </label>
                                                    </div>
                                                </li>                                              
                                                <li>
                                                    <div class="tu-check tu-checksm">
                                                        <input type="checkbox" id="rate4" name="rate4">
                                                        <label for="rate4">
                                                            <span class="tu-stars tu-fourstar">
                                                                <span></span>
                                                            </span>
                                                            <em class="tu-totalreview">
                                                                <span>4.0/<em>5.0</em></span>
                                                            </em>
                                                        </label>
                                                    </div>
                                                </li>                                              
                                                <li>
                                                    <div class="tu-check tu-checksm">
                                                        <input type="checkbox" id="rate3" name="rate2">
                                                        <label for="rate3">
                                                            <span class="tu-stars tu-threestar">
                                                                <span></span>
                                                            </span>
                                                            <em class="tu-totalreview">
                                                                <span>3.0/<em>5.0</em></span>
                                                            </em>
                                                        </label>
                                                    </div>
                                                </li>                                              
                                                <li>
                                                    <div class="tu-check tu-checksm">
                                                        <input type="checkbox" id="rate2a" name="rate2a">
                                                        <label for="rate2a">
                                                            <span class="tu-stars tu-twostar">
                                                                <span></span>
                                                            </span>
                                                            <em class="tu-totalreview">
                                                                <span>2.0/<em>5.0</em></span>
                                                            </em>
                                                        </label>
                                                    </div>
                                                </li>                                              
                                                <li>
                                                    <div class="tu-check tu-checksm">
                                                        <input type="checkbox" id="rate1a" name="rate1a">
                                                        <label for="rate1a">
                                                            <span class="tu-stars tu-onestar">
                                                                <span></span>
                                                            </span>
                                                            <em class="tu-totalreview">
                                                                <span>1.0/<em>5.0</em></span>
                                                            </em>
                                                        </label>
                                                    </div>
                                                </li>                                              
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="tu-aside-holder">
                                    <div class="tu-asidetitle" data-bs-toggle="collapse" data-bs-target="#side1ab" role="button" aria-expanded="true">
                                        <h5>Location</h5>
                                    </div>
                                    <div id="side1ab" class="collapse show">
                                        <div class="tu-aside-content">
                                            <ul class="tu-categoriesfilter">
                                                @foreach ($countrylist as $country)
                                                    <li>
                                                        <div class="tu-check tu-checksm">
                                                            <input type="checkbox" id="name{{$country->id}}" name="expcheck">
                                                            <label for="name{{$country->id}}">{{$country->name}}</label>
                                                        </div>
                                                    </li>
                                                @endforeach

                                                                        
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="tu-filterbtns">
                                    
                                 <button type="submit" class="tu-primbtn">Apply filters</button>
                                 <button type="button" onclick="clearfilter()">   <a href="{{url('student/searchtutor')}}" class="tu-sb-sliver">Clear all filters</a></button>
                                </div>
                            </div>
                        </form>
                        </aside>
                    </div>
                </div>
                
                {{-- Modified search modal as per customer requirements --}}
                <div class="modal fade" id="advSearchModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <style>
                                .pb-5,
                                .py-5 {
                                    padding-bottom: 0 !important;
                                }

                                select.form-control {
                                    color: black !important;
                                }
                            </style>

                            <div class="modal-body">


                                <header>
                                    <h3 class="text-center mb-4">Search Tutor</h3>
                                </header>
                                <form action="{{ route('student.tutoradvs') }}" method="POST"
                                    class="multi-range-field my-5 pb-5">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="name">Class</label>
                                            <select type="text" class="form-control" id="class"
                                                onchange="fetchSubjects()" name="class_name">
                                                <option value="">--Select--</option>
                                                @foreach ($classes as $class)
                                                    <option value="{{ $class->id }}">{{ $class->name }}</option>
                                                @endforeach
                                            </select>


                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name">Subject</label>
                                                <select type="text" class="form-control" id="subject"
                                                    name="subject">
                                                    <option value="">--Select--</option>
                                                    @foreach ($subjectlist as $subjectlist)
                                                        <option value="{{ $subjectlist->id }}">{{ $subjectlist->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name">Nationality</label>
                                                <select type="text" class="form-control" id="country"
                                                    name="country">
                                                    <option value="">--Select--</option>
                                                    @foreach ($countrylist as $countrylist)
                                                        <option value="{{ $countrylist->id }}">{{ $countrylist->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="name">Keyword</label>
                                            <input type="text" class="form-control" id="class" name="keywords">
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <label for="name">Charges</label>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <input type="number" placeholder="Min" class="form-control" name="minrate"
                                                id="minrate">
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <input type="number" placeholder="Max" class="form-control" name="maxrate"
                                                id="maxrate"></select>
                                        </div>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-md-4 col-12">
                                            <label for="name">Experience</label>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <input type="text" class="form-control" placeholder="Min" id="minexp"
                                                name="minexp">
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <input type="text" class="form-control" placeholder="Max" id="maxexp"
                                                name="maxexp">


                                        </div>
                                    </div>
                                    <button type="submit" id=""
                                        class="btn btn-sm btn-primary moveRight mt-2"><i class="fa fa-search"></i>
                                        Search</button>

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

                <!-- Enroll modal -->
                <div class="modal fade" id="openEnrollModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body">
                                <header>
                                    <h3 class="text-center mb-4">Enroll Now</h3>
                                </header>
                                <form action="{{ route('student.purchaseclass') }}" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-12 col-md-6 col-sm-6 mb-2">
                                            <label for="">Tutor</label>
                                            <input type="hidden" id="tutorenrollid" name="tutorenrollid">
                                            <input type="text" class="form-control" name="tutorenroll"
                                                id="tutorenroll" disabled>
                                            <span class="text-danger">
                                                @error('tutorenrollid')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="col-12 col-md-6 col-sm-6 mb-2">
                                            <label for="">Subject</label>
                                            <input type="hidden" id="subjectenrollid" name="subjectenrollid">
                                            <input type="text" class="form-control" name="subjectenroll"
                                                id="subjectenroll" disabled>
                                            <span class="text-danger">
                                                @error('subjectenrollid')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="col-12 col-md-6 col-sm-6 mb-2">
                                            <label for="">Available Class</label>
                                            <input type="text" class="form-control" name="availableclassenroll"
                                                id="availableclassenroll" readonly>
                                            <span class="text-danger">
                                                @error('availableclassenroll')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="col-12 col-md-6 col-sm-6 mb-2">
                                            <label for="">Required Class<i style="color: red">*</i></label>
                                            <input type="number" class="form-control" name="requiredclassenroll"
                                                id="requiredclassenroll" onkeyup="calculate();valuechanged()" required>
                                            <span class="text-danger">
                                                @error('requiredclassenroll')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="col-12 col-md-6 col-sm-6 mb-2">
                                            <label for="">Rate/Hr</label>
                                            <input type="text" class="form-control" name="rateperhourenroll"
                                                id="rateperhourenroll" readonly>
                                            <span class="text-danger">
                                                @error('rateperhourenroll')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="col-12 col-md-6 col-sm-6 mb-2">
                                            <label for="">Total Amount</label>
                                            <input type="text" class="form-control" name="totalamountenroll"
                                                id="totalamountenroll" readonly>
                                            <span class="text-danger">
                                                @error('totalamountenroll')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="col-12 col-md-6 mb-3">
                                            <label for="">Date<span style="color:red">*</span></label>
                                            <input type="date" class="form-control" id="classdate" name="classdate"
                                                min="{{ date('Y-m-d', strtotime('+0 day')) }}" onchange="searchSlots()">
                                            <span class="text-danger">
                                                @error('classdate')
                                                    {{ 'Date is required' }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="col-12 mb-3">
                                            {{-- <label for="">Selected Slot</label> --}}
                                            <input type="hidden" class="form-control" id="selectedSlot"
                                                name="selectedSlot" readonly>
                                            <span class="text-danger">
                                                @error('selectedSlot')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="col-12 mb-3">
                                            {{-- <label for="">Selected Slot</label> --}}
                                            <input type="hidden" class="form-control" id="selectedSlotIds"
                                                name="selectedSlotIds" readonly>
                                            <span class="text-danger">
                                                @error('selectedSlot')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <!-- Available Slots Section -->
                                        <div id="availableSlots" class="mt-4">
                                            <!-- Slots will be dynamically added here based on search results -->
                                            <!-- Example Slot: <div class="slot" onclick="toggleSlot(this)"></div> -->
                                        </div>
                                        <p id="selectedSlotConfirmation"></p>
                                        <div class="col-12 col-md-12 col-sm-6 mb-2">
                                        <input class="" type="checkbox" id="contactadmin" name="contactadmin"><label for="contactadmin">&nbsp;Contact admin</label>
                                        </div>
                                    </div>
                                    <div class="row" style="float:right">
                                        <div class="col-12 col-md-12 col-sm-12 mb-2" id="formbuttons">
                                            <button class="btn btn-sm btn-danger" data-dismiss="modal">Cancel</button>
                                            {{-- <button type="submit" class="btn btn-sm btn-success">Pay Now</button> --}}
                                            <button type="button" onclick="confirmformdata()" class="btn btn-sm btn-success">Confirm</button>
                                            <button type="button" onclick="confirmformdata()" class="btn btn-sm btn-success">Confirm</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>


                <!--Demo modal -->
                <div class="modal fade" id="openDemoModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">


                            <div class="modal-body">


                                <header>
                                    <h3 class="text-center ">Free Trial Class</h3>
                                </header>

                                <form action="{{ route('student.bookdemo') }}" method="POST">
                                    @csrf
                                    <div class=" row mb-2">

                                        <div class="form-group col-md-6">
                                            {{-- <label for="">Candidate</label> --}}
                                            <input type="hidden" class="form-control" id="demostudentname"
                                                value="{{ session('userid')->name }}" disabled>

                                        </div>
                                        <div class="form-group col-md-6">
                                            {{-- <label for="">Tutor</label> --}}
                                            <input type="hidden" class="" id="demotutorid" name="demotutorid">
                                            <input type="hidden" class="form-control" id="demotutorname"
                                                name="demotutorname" disabled>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-6 col-sm-12 col-xs-12">
                                            <label for="name">Subject</label>
                                            <input type="hidden" id="demosubjectid" name="demosubjectid">
                                            <input type="text" class="form-control" id="demosubjectname"
                                                name="demosubjectname" disabled>
                                            {{-- <select class="form-control" id="" disabled>
                                            <option>--Select--</option>
                                            <option>Biology</option>
                                            <option>Chemistry</option>
                                            <option selected>English</option>
                                            <option>Mathematics</option>
                                            <option>Physics</option>

                                        </select> --}}
                                        </div>
                                        <div class="col-md-6 col-sm-12 col-xs-12">
                                            <label for="">Prefer Slot 1<i style="color: red;">*</i></label>
                                            <input type="datetime-local" class="form-control" id="demoslotfirst"
                                                name="demoslotfirst" required>

                                        </div>
                                    </div>

                                    <div class="row mb-2">
                                        <div class="col-md-6 col-sm-12 col-xs-12">
                                            <label for="">Prefer Slot 2<i style="color: red;">*</i></label>
                                            <input type="datetime-local" class="form-control" id="demoslotsecond"
                                                name="demoslotsecond" required>

                                        </div>
                                        <div class="col-md-6 col-sm-12 col-xs-12">
                                            <label for="">Prefer Slot 3<i style="color: red;">*</i></label>
                                            <input type="datetime-local" class="form-control" id="demoslotthird"
                                                name="demoslotthird" required>

                                        </div>

                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                            <label for="">Message(<span><i>Optional</i></span>)</label>
                                            <textarea class="form-control" id="message" name="message" style="height: 110px !important"></textarea>

                                        </div>

                                    </div>
                                    <div class="mt-2">
                                        <button type="submit" id="" class="btn btn-sm btn-success"
                                            style="float:right ">Schedule
                                            Demo</button>
                                    </div>

                            </div>





                        </div>






                        </form>

                    </div>
                </div>
            </div>
        </div>
        <!-- Schedule modal -->
        <div class="modal fade" id="scheduleclassmodal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">

                    <div class="modal-body">

                        <header>
                            <h3 class="text-center mb-4">Available Slots</h3>
                        </header>

                        <div class="row">
                            <div class="col-12 mb-3">
                                <input type="hidden" id="tutorslotid" name="tutorslotid">
                                <label>Date<span style="color:red">*</span></label>
                                <input type="date" class="form-control" id="classdate" name="classdate"
                                    min="{{ date('Y-m-d', strtotime('+0 day')) }}" onchange="searchSlots()">
                                <span class="text-danger">
                                    @error('classdate')
                                        {{ 'Date is required' }}
                                    @enderror
                                </span>
                            </div>
                            {{-- <div class="col-12 mb-3">
                           <button type="button" class="btn btn-sm btn-primary" onclick="searchSlots();">Search</button>
                       </div> --}}
                        </div>

                        <!-- Available Slots Section -->
                        {{-- <div id="availableSlots" class="mt-4"> --}}
                        <!-- Slots will be dynamically added here based on search results -->
                        <!-- Example Slot: <div class="slot" onclick="toggleSlot(this)"></div> -->
                    </div>


                </div>
            </div>
        </div>
    </div>
    <script>
        function openDemoModal(tid, tname, sid, sname) {
            $('#demotutorid').val(tid)
            $('#demotutorname').val(tname)
            $('#demosubjectid').val(sid)
            $('#demosubjectname').val(sname)
            $('#openDemoModal').modal('show')

        }

        $(document).ready(function() {
            // Function to validate slot timings
            function validateSlotTimings() {
                var now = new Date();
                var minTime = new Date(now.getTime() + 60 * 60 * 1000); // Current time + 1 hour

                // Validate Prefer Slot 1
                setMinDate('#demoslotfirst', minTime);

                // Validate Prefer Slot 2
                setMinDate('#demoslotsecond', minTime);

                // Validate Prefer Slot 3
                setMinDate('#demoslotthird', minTime);

                return true;
            }

            // Set min date for datetime-local input
            function setMinDate(selector, minDate) {
                // Get the current date and time in the required format
                var minDateString = minDate.toISOString().slice(0, 16);

                // Set the min attribute for the specified datetime-local input
                $(selector).attr('min', minDateString);
            }

            // Call the validation function on page load
            validateSlotTimings();
        });


        function openEnrollModal(tid, tname, sid, sname, ttopics, ratehr) {
            clearselectedslots()
            $('#tutorenrollid').val(tid)
            $('#tutorenroll').val(tname)
            $('#subjectenrollid').val(sid)
            $('#subjectenroll').val(sname)
            $('#availableclassenroll').val(ttopics)
            $('#rateperhourenroll').val(ratehr)
            // $('#totalamountenroll').val(ratehr * )
            $('#openEnrollModal').modal('show')
        }

        function calculate() {
            $('#totalamountenroll').val($('#rateperhourenroll').val() * $('#requiredclassenroll').val())
        }
    </script>
    <script>
        // range slid

        let inputLeft = document.getElementById('input-left');
        let inputRight = document.getElementById('input-right');
        let range = document.querySelector('.slider > .range');
        let priceFrom = document.querySelector('.price-from');
        let priceTo = document.querySelector('.price-to');

        function setLeftValue() {
            let _this = inputLeft,
                min = parseInt(_this.min),
                max = parseInt(_this.max);
            _this.value = Math.min(
                parseInt(_this.value),
                parseInt(inputRight.value) - 1
            );
            priceFrom.textContent = `Min: £${_this.value}`;
            let percent = ((_this.value - min) / (max - min)) * 100;
            range.style.left = `${percent}%`;
        }
        setLeftValue();

        function setRightValue() {
            let _this = inputRight,
                min = parseInt(_this.min),
                max = parseInt(_this.max);

            _this.value = Math.max(
                parseInt(_this.value),
                parseInt(inputLeft.value) + 1
            );
            priceTo.textContent = `Max: £${_this.value}`;
            let percent = ((_this.value - min) / (max - min)) * 100;
            range.style.right = `${100 - percent}%`;
        }
        setRightValue();
        inputLeft.addEventListener('input', setLeftValue);
        inputRight.addEventListener('input', setRightValue);

        inputLeft.addEventListener('mousemove', (e) => {
            inputLeft.classList.add('hover');
        });
        inputLeft.addEventListener('mouseout', (e) => {
            inputLeft.classList.remove('hover');
        });
        inputLeft.addEventListener('mousedown', (e) => {
            inputLeft.classList.add('active');
        });
        inputLeft.addEventListener('mouseup', (e) => {
            inputLeft.classList.remove('active');
        });
        inputLeft.addEventListener('touchstart', (e) => {
            inputLeft.classList.add('active');
        });
        inputLeft.addEventListener('touchend', (e) => {
            inputLeft.classList.remove('active');
        });
        inputRight.addEventListener('mouseover', (e) => {
            inputRight.classList.add('hover');
        });
        inputRight.addEventListener('mouseout', (e) => {
            inputRight.classList.remove('hover');
        });
        inputRight.addEventListener('mousedown', (e) => {
            inputRight.classList.add('active');
        });
        inputRight.addEventListener('mouseup', (e) => {
            inputRight.classList.remove('active');
        });
        inputRight.addEventListener('touchstart', (e) => {
            inputRight.classList.add('active');
        });
        inputRight.addEventListener('touchend', (e) => {
            inputRight.classList.remove('active');
        });

        //   experience range
        let minExp = document.getElementById('minexp');
        let maxExp = document.getElementById('maxexp');
        let rangeExp = document.querySelector('.slider1 > .range1');
        let expFrom = document.querySelector('.price-from1');
        let expTo = document.querySelector('.price-to1');

        function setMinValue() {
            let _this1 = minExp,
                min = parseInt(_this1.min),
                max = parseInt(_this1.max);
            _this1.value = Math.min(
                parseInt(_this1.value),
                parseInt(maxExp.value) - 1
            );
            expFrom.textContent = `Year: ${_this1.value}`;
            let percent1 = ((_this1.value - min) / (max - min)) * 100;
            rangeExp.style.left = `${percent1}%`;
        }
        setMinValue();

        function setMaxValue() {
            let _this1 = maxExp,
                min = parseInt(_this1.min),
                max = parseInt(_this1.max);

            _this1.value = Math.max(
                parseInt(_this1.value),
                parseInt(minExp.value) + 1
            );
            expTo.textContent = `Year: ${_this1.value}`;
            let percent1 = ((_this1.value - min) / (max - min)) * 100;
            rangeExp.style.right = `${100 - percent1}%`;
        }
        setMaxValue();
        minExp.addEventListener('input', setMinValue);
        maxExp.addEventListener('input', setMaxValue);

        minExp.addEventListener('mousemove', (e) => {
            minExp.classList.add('hover');
        });
        minExp.addEventListener('mouseout', (e) => {
            minExp.classList.remove('hover');
        });
        minExp.addEventListener('mousedown', (e) => {
            minExp.classList.add('active');
        });
        minExp.addEventListener('mouseup', (e) => {
            minExp.classList.remove('active');
        });
        minExp.addEventListener('touchstart', (e) => {
            minExp.classList.add('active');
        });
        minExp.addEventListener('touchend', (e) => {
            minExp.classList.remove('active');
        });
        maxExp.addEventListener('mouseover', (e) => {
            maxExp.classList.add('hover');
        });
        maxExp.addEventListener('mouseout', (e) => {
            maxExp.classList.remove('hover');
        });
        maxExp.addEventListener('mousedown', (e) => {
            maxExp.classList.add('active');
        });
        maxExp.addEventListener('mouseup', (e) => {
            maxExp.classList.remove('active');
        });
        maxExp.addEventListener('touchstart', (e) => {
            maxExp.classList.add('active');
        });
        maxExp.addEventListener('touchend', (e) => {
            maxExp.classList.remove('active');
        });



        // --star rating--

        let minrating = document.getElementById('minrating');
        let maxRating = document.getElementById('maxrating');


        let rangeRating = document.querySelector('.slider2 > .range2');
        let ratingFrom = document.querySelector('.price-from2');
        let ratingTo = document.querySelector('.price-to2');

        function setMinRating() {
            let _this2 = minrating,
                min = parseInt(_this2.min),
                max = parseInt(_this2.max);
            _this2.value = Math.min(
                parseInt(_this2.value),
                parseInt(maxRating.value) - 0
            );
            ratingFrom.textContent = `Star: ${_this2.value}`;
            let percent1 = ((_this2.value - min) / (max - min)) * 100;
            rangeRating.style.left = `${percent1}%`;
        }
        setMinRating();

        function setMaxRating() {
            let _this2 = maxRating,
                min = parseInt(_this2.min),
                max = parseInt(_this2.max);

            _this2.value = Math.max(
                parseInt(_this2.value),
                parseInt(minrating.value) + 0
            );
            ratingTo.textContent = `Star: ${_this2.value}`;
            let percent1 = ((_this2.value - min) / (max - min)) * 100;
            rangeRating.style.right = `${100 - percent1}%`;
        }
        setMaxRating();
        minrating.addEventListener('input', setMinRating);
        maxRating.addEventListener('input', setMaxRating);


        minrating.addEventListener('mousemove', (e) => {
            minrating.classList.add('hover');
        });
        minrating.addEventListener('mouseout', (e) => {
            minrating.classList.remove('hover');
        });
        minrating.addEventListener('mousedown', (e) => {
            minrating.classList.add('active');
        });
        minrating.addEventListener('mouseup', (e) => {
            minrating.classList.remove('active');
        });
        minrating.addEventListener('touchstart', (e) => {
            minrating.classList.add('active');
        });
        minrating.addEventListener('touchend', (e) => {
            minrating.classList.remove('active');
        });
        maxRating.addEventListener('mouseover', (e) => {
            maxRating.classList.add('hover');
        });
        maxRating.addEventListener('mouseout', (e) => {
            maxRating.classList.remove('hover');
        });
        maxRating.addEventListener('mousedown', (e) => {
            maxRating.classList.add('active');
        });
        maxRating.addEventListener('mouseup', (e) => {
            maxRating.classList.remove('active');
        });
        maxRating.addEventListener('touchstart', (e) => {
            maxRating.classList.add('active');
        });
        maxRating.addEventListener('touchend', (e) => {
            maxRating.classList.remove('active');
        });
    </script>
    <script>
        function fetchSubjects() {

            var classId = $('#class option:selected').val();
            $("#subject").html('');
            $("#topic").html('');
            $.ajax({
                url: "{{ url('fetchsubjects') }}",
                type: "POST",
                data: {
                    class_id: classId,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $('#subject').html('<option value="">-- Select Subject --</option>');
                    $.each(result.subjects, function(key, value) {
                        $("#subject").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });

                }

            });

        };
    </script>

{{-- Slot Availablity Starts here --}}
<script>
    
    // At the beginning of your script
    let selectedSlotIds = [];

    // Load selectedSlotIds from local storage if available
    const storedSelectedSlotIds = sessionStorage.getItem('selectedSlotIds');
    if (storedSelectedSlotIds) {
        selectedSlotIds = JSON.parse(storedSelectedSlotIds);
    }

    // Function to convert 24-hour time to AM/PM format
    function convertToAmPm(timeString) {
        const convertedTime = new Date(`2000-01-01 ${timeString}`);
        return convertedTime.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
    }

    function searchSlots() {
        const tutorid = document.getElementById('tutorenrollid').value;
        const selectedDate = document.getElementById('classdate').value;
        const csrfToken = $('meta[name="csrf-token"]').attr('content'); // Get CSRF token from meta tag

        // Make an AJAX request to fetch available slots based on the selected date
        $.ajax({
            url: "{{ route('index.slots.search') }}",
            type: 'GET',
            data: { date: selectedDate, tutorid: tutorid },
            headers: {
                'X-CSRF-TOKEN': csrfToken, // Include CSRF token in headers
            },
            success: function (response) {
                // Assuming 'response' is an array of slot data
                displayAvailableSlots(response);
            },
            error: function (error) {
                console.error('Error fetching slot data:', error);
            }
        });
    }

    function displayAvailableSlots(slots) {
        const availableSlotsContainer = document.getElementById('availableSlots');
        availableSlotsContainer.innerHTML = '';

        if (slots.length === 0) {
            // Display an error message when no slots are found
            const errorMessage = document.createElement('div');
            errorMessage.className = 'error-message';
            errorMessage.innerHTML = 'No slots found';
            availableSlotsContainer.appendChild(errorMessage);
            return;
        }

        for (let i = 0; i < slots.length; i++) {
            const slot = document.createElement('div');
            slot.className = 'slot';
            slot.setAttribute('data-slot-id', slots[i].id); // Set slot ID as a data attribute
            slot.onclick = function () {
                toggleSlot(this);
            };

           // Check if the slot is selected and stored in local storage
            if ((selectedSlotIds && selectedSlotIds.includes(slots[i].id.toString())) || (storedSelectedSlotIds && storedSelectedSlotIds.includes(slots[i].id.toString()))) {
                slot.classList.add('selected');
                slot.style.backgroundColor = 'blue'; // Set the background color to blue
            }


            // Customize the slot appearance based on the slot data
            if (slots[i].status === 0) {
                // Available slot styling
                slot.classList.add('available');
            } else {
                // Booked slot styling
                slot.classList.add('booked');
            }

            // Add slot information to the slot element
            const slotInfo = document.createElement('div');
            slotInfo.innerHTML = `${convertToAmPm(slots[i].slot)}`;
            slot.appendChild(slotInfo);

            availableSlotsContainer.appendChild(slot);
        }
    }

    function toggleSlot(slot) {
        // Check if the slot is already selected or disabled
        const slotId = slot.getAttribute('data-slot-id');

        // Check if the slot is not available (you can modify this condition based on your data)
        if (slot.classList.contains('booked') || slot.classList.contains('unavailable')) {
            // Slot is not available, return early
            return;
        }

        if (selectedSlotIds.includes(slotId)) {
            // Slot is already selected, deselect it
            const index = selectedSlotIds.indexOf(slotId);
            selectedSlotIds.splice(index, 1);
            slot.classList.remove('selected');
            slot.style.backgroundColor = ''; // Remove the background color
        } else if (!slot.hasAttribute('disabled')) {
            // Slot is not selected, select it
            selectedSlotIds.push(slotId);
            slot.classList.add('selected');
            slot.style.backgroundColor = 'blue'; // Set the background color to blue
        }
        valuechanged();
        // Retrieve selected slot IDs from local storage
        const storedSelectedSlotIds = JSON.parse(sessionStorage.getItem('selectedSlotIds')) || [];

            // Save selectedSlotIds to local storage
    sessionStorage.setItem('selectedSlotIds', JSON.stringify(selectedSlotIds));

// Update the 'Selected Slot' input field
const selectedSlotInput = document.getElementById('selectedSlot');
selectedSlotInput.value = selectedSlotIds.map(id => convertToAmPm(id)).join(', ');

// Attach an event listener to the form submission
document.querySelector('form').addEventListener('submit', function (event) {
    // Before the form is submitted, update the hidden input with the latest selected slots from local storage
    const latestStoredSelectedSlotIds = JSON.parse(sessionStorage.getItem('selectedSlotIds')) || [];
    document.getElementById('selectedSlot').value = latestStoredSelectedSlotIds.join(', ');
document.getElementById('selectedSlot').value = latestStoredSelectedSlotIds.join(', ');

    // Optionally, you can remove or clear the local storage after using the data
    // sessionStorage.removeItem('selectedSlotIds');
});

        // // Update the 'Selected Slot' input field
        // const selectedSlotInput = document.getElementById('selectedSlot');
        // selectedSlotInput.value = selectedSlotIds.map(id => convertToAmPm(id)).join(', ');

        // // Save selectedSlotIds to local storage
        // sessionStorage.setItem('selectedSlotIds', JSON.stringify(selectedSlotIds));
    }

    // Function to handle the submission of selected slots to the API
    function submitSelectedSlots() {
        // Add your logic to send selectedSlotIds to the API
        console.log('Selected Slot IDs:', selectedSlotIds);

        // Clear selectedSlotIds after submission (optional)
        // sessionStorage.removeItem('selectedSlotIds');
    }

    function clearselectedslots() {
    // Clear selectedSlotIds in memory
    selectedSlotIds = [];

    // Clear selectedSlotIds in local storage
    sessionStorage.removeItem('selectedSlotIds');

    // Clear the 'Selected Slot' input field
    const selectedSlotInput = document.getElementById('selectedSlot');
    selectedSlotInput.value = '';

    // Optionally, you can also clear the slots in the UI
    const slots = document.querySelectorAll('.slot.selected');
    slots.forEach(slot => {
        slot.classList.remove('selected');
        slot.style.backgroundColor = ''; // Remove the background color
    });

    // Optionally, you can also update the UI or perform other actions related to clearing
    // ...

    console.log('Selected Slot IDs cleared');
}

</script>


{{-- Slots availability ends here --}}

    <script>
        function checkslots(id) {
            document.getElementById('tutorslotid').value = id;
            $('#scheduleclassmodal').modal('show');
            searchSlots();
        }
    </script>



    <script>
        function checkslots(id) {

            document.getElementById('tutorslotid').value = id;

            $('#scheduleclassmodal').modal('show')
            searchSlots();
        }

        function confirmformdata() {

            var totalclasstaken = document.getElementById('requiredclassenroll').value;
            var totalclassavl = document.getElementById('availableclassenroll').value;
            var selectedSlotIds = JSON.parse(sessionStorage.getItem('selectedSlotIds')) || [];
            if(totalclasstaken == ""){
                alert('Required class should not be empty');
                return false;
            }
            if(totalclasstaken < 1){
                alert('Required class should not be less than 1');
                return false;
            }
            if(totalclasstaken > totalclassavl){
                alert('Required class should not be more than available class');
                return false;
            }
            
            
            
            document.getElementById('selectedSlotConfirmation').innerHTML = '';
            document.getElementById('selectedSlotConfirmation').innerHTML = `You have selected total ${selectedSlotIds.length} slots out of ${totalclasstaken}.`;
            if(selectedSlotIds.length > totalclasstaken){
                alert('Selected slots should not more than purchase class');
                return false;
            }
            // Update the 'Selected Slot' input field
            document.getElementById('selectedSlotIds').value = selectedSlotIds.join(',');

            document.getElementById('formbuttons').innerHTML = '';
            document.getElementById('formbuttons').innerHTML = `<button class="btn btn-sm btn-danger" data-dismiss="modal">Cancel</button>
                                                                <button type="submit" class="btn btn-sm btn-success">Pay Now</button>`;
        }
        function valuechanged(){
            document.getElementById('formbuttons').innerHTML = '';
            document.getElementById('formbuttons').innerHTML = `<button class="btn btn-sm btn-danger" data-dismiss="modal">Cancel</button>
                                                                <button type="button" onclick="confirmformdata()" class="btn btn-sm btn-success">Confirm</button>`;
            document.getElementById('selectedSlotConfirmation').innerHTML = '';
        }

    </script>
   
@endsection