@extends('includes.layout') <!-- Extend the layout -->

@section('content')
<!-- Define the content section -->

<div class="bg-main-body">
    <div class="container rounded">
        <div class="row py-5">
            @if (session()->has('success'))
            <div class="alert alert-success text-center">
                {{ session()->get('success') }}
            </div>
            @endif
            <div class="col-md-3 border-end">
                <div class="d-flex flex-column align-items-center p-3 ">
                    <div class="avatar-upload mt-1 mb-3">
                        <div class="avatar-edit" onchange="readURL(this);">
                            <input type='file' name="profile" id="imageUpload" accept=".png, .jpg, .jpeg" />
                            <label for="imageUpload"></label>
                        </div>
                        <div class="avatar-preview ">

                            <div id="imagePreview" style="background-image: url('{{ $user->profile_photo_path ? asset('saloon_profile/' . $user->profile_photo_path) : asset('saloon_profile/user.png') }}');">
                            </div>
                        </div>
                    </div>
                    <span class="font-weight-bold">{{ ucwords($user->name) }}</span>
                    {{-- <span class="text-black-50">{{$user->email}}</span> --}}
                    <span></span>
                </div>

                <div class=" align-items-start">
                    <div class="nav border rounded p-2 flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        <button class="nav-link  text-start border-bottom active" id="v-pills-details-tab" data-bs-toggle="pill" data-bs-target="#v-pills-details" type="button" role="tab" aria-controls="v-pills-details" aria-selected="true"><i class="fa fa-user-o text-dim me-2" aria-hidden="true"></i> Personal Details</button>
                        <button class="nav-link text-start border-bottom" id="v-pills-services-tab" data-bs-toggle="pill" data-bs-target="#v-pills-services" type="button" role="tab" aria-controls="v-pills-services" aria-selected="false"><i class="fa fa-list text-dim me-2" aria-hidden="true"></i> Add Services</button>
                        <!-- <button class="nav-link text-start border-bottom" id="v-pills-favourite-tab" data-bs-toggle="pill" data-bs-target="#v-pills-favourite" type="button" role="tab" aria-controls="v-pills-favourite" aria-selected="false"><i class="fa fa-star text-dim me-2" aria-hidden="true"></i> Favourite</button> -->
                        <button class="nav-link text-start border-bottom" id="v-pills-booking-tab" data-bs-toggle="pill" data-bs-target="#v-pills-booking" type="button" role="tab" aria-controls="v-pills-booking" aria-selected="false"><i class="fa fa-calendar text-dim me-2" aria-hidden="true"></i> Booking</button>

                        <button class="nav-link text-start border-bottom" id="v-pills-earning-tab" data-bs-toggle="pill" data-bs-target="#v-pills-earning" type="button" role="tab" aria-controls="v-pills-earning" aria-selected="false"><i class="fa fa-money text-dim me-2" aria-hidden="true"></i> Earning</button>

                        <button class="nav-link text-start " id="v-pills-gallery-tab" data-bs-toggle="pill" data-bs-target="#v-pills-gallery" type="button" role="tab" aria-controls="v-pills-gallery" aria-selected="false"><i class="fa fa-image text-dim me-2" aria-hidden="true"></i> Photos/Videos</button>

                    </div>

                </div>

            </div>
            <div class="col-md-9">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-details" role="tabpanel" aria-labelledby="v-pills-details-tab">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="p-3 ">
                                    <h6>Personal Details</h6>
                                    <form action="{{ route('artist.ArtistProfileUpdate') }}" method="post" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="profile_id" value="{{ $user->id }}">
                                        <div class="row mt-3">

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">Artist Name</label>
                                                <input type="text" class="form-control" placeholder="enter name" name="name" value="{{ $user->name ?? '' }}">
                                            </div>
                                            <div class="col-md-6 mb-3"><label class="form-label">Mobile Number</label>
                                                <input type="tel" class="form-control" placeholder="enter phone number" name="phone" value="{{ $user->phone ?? '' }}" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" maxlength="10">

                                                @if ($errors->has('phone'))
                                                <span style="color:red;">
                                                    {{ $errors->first('phone') }}.
                                                </span>
                                                @endif


                                            </div>
                                            <div class="col-md-12 mb-3"><label class="form-label">Bio </label>
                                                <textarea type="text" class="form-control" placeholder="enter bio " name="bio" value="">{{ $user->bio ?? '' }}</textarea>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label"> City</label>
                                                <select class="form-select" aria-label="Default select example" name="city">
                                                    <option selected value="{{ $user->city }}">{{ $user->city }}
                                                    </option>
                                                    <option value="chandigarh">Chandigarh</option>
                                                    <option value="mohali">Mohali</option>
                                                    <option value="himachal">Himachal</option>
                                                </select>
                                            </div>
                                            <!--<div class="col-md-6 mb-3">
                                                <label class="form-label"> Upload Video</label>
                                                <input type="file" name="video" accept="video/mp4,video/x-m4v,video" class="form-control" multiple="" data-max_length="20" class="upload__inputfilevideo">
                                            </div>-->

                                            <div class="col-md-12 mb-3"><label class="form-label">Address </label>
                                                <textarea type="text" class="form-control" placeholder="enter address " name="address" value="">{{ $user->address }}</textarea>
                                            </div>
                                            {{-- <div class="col-md-12 mb-3">
                                                <label class="form-label">Services</label>
                                                <div class="mt-2">
                                                    @foreach ($latestServices as $key => $latestService)
                                                    <input type="checkbox" name="service[]" class="btn-check" id="btn{{ $key + 1 }}" autocomplete="off" value="{{ $latestService->id }}">
                                            <label class="btn btn-outline-theme mb-2" for="btn{{ $key + 1 }}">{{ $latestService->name }}</label>
                                            @endforeach

                                        </div>
                                </div> --}}
                                {{-- <div class="col-md-12 mb-3">
                                                <label class="form-label">Skills</label>
                                                <div class="mt-2">
                                                    @foreach ($latestServices as $key => $latestService)
                                                        <input type="checkbox" name="service[]" class="btn-check"
                                                            id="btn{{ $key + 1 }}" autocomplete="off"
                                value="{{ $latestService->id }}">
                                <label class="btn btn-outline-theme mb-2" for="btn{{ $key + 1 }}">{{ $latestService->name }}</label>
                                @endforeach

                            </div>
                        </div> --}}
                        <div class="mt-5"><button class="btn btn-primary profile-button" type="submit">Save
                                Profile</button></div>
                    </div>
                    </form>
                </div>
            </div>
            <!-- <div class="col-md-4">
                <div class="p-3">
                    <h6>Upload Photos / Videos</h6>
                    <div class="upload__box mt-3">
                        <div class="upload__btn-box">
                            <label class="upload__btn"> Upload Files <input type="file" multiple="" data-max_length="20" class="upload__inputfile" accept="image/*,video/*">
                            </label>
                        </div>
                        <div class="progress mb-1" style="height: 2px;display:none">
                            <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="row upload__img-wrap"></div>


                        <div class="row g-1">
                            <h6 class="mb-0">Photos</h6>
                            @foreach ($saloon_photos as $saloon_photo)
                            @if($saloon_photo->file_type == "image" || $saloon_photo->file_type == NULL)
                            <div class="col-4">
                                <div class="bg-light position-relative">
                                    <div class="upload__img-close" data-id="{{ $saloon_photo->id }}" data-type="image">
                                    </div>
                                    <img src="{{ asset('/Saloon_photos/' . $saloon_photo->image_file) }}" alt="alt" class="w-100 overflow-hidden" height="80px">
                                </div>
                            </div>
                            @endif
                            @endforeach

                        </div>

                        <div class="row upload__video-wrap g-1 mt-3">
                            <h6 class="mb-0 ">Videos</h6>
                            @foreach ($saloon_photos as $saloon_photo)
                            @if($saloon_photo->file_type == "video")
                            <div class="bg-light position-relative">
                                <div class="upload__img-close" data-id="{{ $saloon_photo->id }}" data-type="video">
                                </div>
                                <video width="100%" controls muted>
                                    <source src="{{ asset('/saloonvideos/'.$saloon_photo->image_file) }}" type="video/mp4">
                                </video>
                            </div>
                            @endif
                            @endforeach
                        </div>

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


    <div class="tab-pane fade" id="v-pills-services" role="tabpanel" aria-labelledby="v-pills-services-tab">
        <div class="row">
            <div class="col-md-12">
                <div class="p-3">
                    <div class="col-md-12">
                        <h6 class="mb-0">Add Services</h6>
                        <form action="" method="POST" id="service-form">
                            @csrf
                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                            <div class="input-group mb-3 mt-3">
                                <select class="form-select rounded-0 tx-12" aria-label="Default select example" id="select-service" name="service_id">
                                    <option selected="">Select Service</option>
                                    @foreach ($latestServices as $key => $latestService)
                                    <option value="{{ $latestService->id }}">
                                        {{ ucwords($latestService->name) }}
                                    </option>
                                    @endforeach
                                </select>
                                <select class="form-select tx-12" aria-label="Default select example" name="subservice_id" id="select-subs-service">
                                    <option value="">Select Subcategory</option>

                                </select>

                                <input type="text" placeholder="Service" class="form-control tx-12 d-none" id="service_other" name="service_other">
                                <input type="text" placeholder="Sub Service" class="form-control tx-12 d-none" id="other" name="other">
                                <select class="form-select tx-12" aria-label="Default select example" name="gender" id="gender">
                                    <option value="">Select Gender</option>
                                    <option value="M">Male</option>
                                    <option value="F">Female</option>

                                </select>
                                <input type="tel" placeholder="Time Duration" title="Minutes" class="form-control tx-12" id="" name="duration" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" maxlength="3"> <input type="text" placeholder="Enter Price" class="form-control tx-12" id="" name="price" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" maxlength="5" />

                                <button class="btn btn-primary rounded-0" type="button" id="button-addon2">Add</button>
                                <button type="reset" class="btn rounded-0 btn-secondary">Clear</button>
                            </div>
                        </form>
                    </div>

                    <div class="col-md-12 mt-4">
                        <div class="card">
                            <table class="table tx-12  mb-0 table-borded" id="services-list-table">
                                <thead>
                                    <tr>
                                        <th scope="col" style="width:100px;">Sr. No.</th>
                                        <th scope="col" style="width:150px;">Service</th>
                                        <th scope="col" style="width:150px;">Sub Services</th>
                                        <th scope="col" style="width:100px;">Gender</th>
                                        <th scope="col" style="width:100px;">Duration</th>
                                        <th scope="col" style="width:100px;">Price</th>
                                        <th scope="col" style="width:100px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($userservices as $key => $userservice)
                                    <tr data-service-id="{{ $userservice->id }}">
                                        <td style="width:100px;">{{ $key + 1 }}</td>
                                        <td style="width:150px;">
                                            {{ ucwords($userservice->services->name) }}
                                        </td>
                                        <td style="width:150px;">
                                            {{ ucwords($userservice->subservices->name) ?? '' }}
                                        </td>
                                        <td style="width:100px;">{{ $userservice->gender }}</td>
                                        <td style="width:100px;">{{ $userservice->duration }}</td>
                                        <td style="width:100px;">{{ $userservice->price }}</td>
                                        <td style="width:100px;">
                                            <a class="btn" data-bs-toggle="modal" data-bs-target="#exampleModal" data-service-id="{{ $userservice->id }}" data-service-name="{{ $userservice->services->name }}" data-subservice-name="{{ $userservice->subservices->name ?? '' }}" data-gender="{{ $userservice->gender }}" data-duration="{{ $userservice->duration }}" data-price="{{ $userservice->price }}" data-subservice-id="{{ $userservice->subservices->id }}">
                                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                            </a>


                                            <a href="javascript:void(0);" class="btn" onclick="confirmDeleteService({{ $userservice->id }} )">
                                                <i class="fa fa-trash-o" aria-hidden="true"></i>
                                            </a>

                                        </td>
                                    </tr>
                                    @endforeach

                                </tbody>
                            </table>

                            <table class="table tx-12  mb-0 table-borded" id="data-table">
                                <tbody id="data-table-body">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal -->
        <script>
            $(document).ready(function() {
                // Handle modal show event
                $("#exampleModal").on("show.bs.modal", function(event) {
                    var button = $(event.relatedTarget);
                    var serviceId = button.data("service-id");
                    var serviceName = button.data("service-name");
                    //alert(serviceName);
                    var serviceOption = $("#edit-select-service option:contains('" + serviceName + "')");

                    if (serviceOption.length > 0) {
                        serviceOption.prop('selected', true);
                        $("#edit-select-service").change();
                        console.log("Service name found in options and selected.");
                    } else {
                        console.log("Service name not found in options.");
                    }


                    // $("#edit-select-service option").prop("selected", false); // Unselect all options
                    // $("#edit-select-service option[value='" + serviceId + "']").prop("selected", true).change();


                    var subserviceName = button.data("subservice-name");
                    var subserviceId = button.data("subservice-id");

                    $("#main_service_id").val(serviceId);
                    // $("#edit-select-service").val(serviceId).change();
                    var newOption = new Option(subserviceName, subserviceId);
                    // Append the new option to the subservice select
                    $("#edit-select-subs-service").empty().append(newOption).change();
                    $("#edit-select-subs-service option[value='" + subserviceName + "']").prop('selected', true);
                    //$("#edit_service_other").val(button.data("service-name")).removeClass("d-none");
                    //$("#edit_other").val(button.data("subservice-name")).removeClass("d-none");
                    $("#edit_gender").val(button.data("gender")).change();
                    $("#edit_duration").val(button.data("duration"));
                    $("#edit_price").val(button.data("price"));

                });

            });
        </script>

        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Edit Services</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="#" method="POST" id="edit-service-form">
                            @csrf
                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                            <input type="hidden" name="main_service_id" id="main_service_id" value="">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <select class="form-select rounded-0 tx-12" aria-label="Default select example" id="edit-select-service" name="edit_service_id">
                                        <option selected="">Select Service</option>
                                        @foreach ($latestServices as $key => $latestService)
                                        <option value="{{ $latestService->id }}">
                                            {{ $latestService->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <select class="form-select tx-12" aria-label="Default select example" name="edit_subservice_id" id="edit-select-subs-service" required>
                                        <option value="">Select Subcategory</option>
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <input type="text" placeholder="Service" class="form-control tx-12 d-none" id="edit_service_other" name="edit_service_other">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="text" placeholder="Sub Service" class="form-control tx-12 d-none" id="edit_other" name="edit_other">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <select class="form-select tx-12" aria-label="Default select example" name="edit_gender" id="edit_gender">
                                        <option value="">Select Gender</option>
                                        <option value="M">Male</option>
                                        <option value="F">Female</option>

                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="number" placeholder="Time Duration" class="form-control tx-12" id="edit_duration" name="edit_duration">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="text" placeholder="Enter Price" class="form-control tx-12" id="edit_price" name="edit_price" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" maxlength="5">
                                </div>

                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="edit-button-addon">Save</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->

    </div>
    <div class="tab-pane fade" id="v-pills-favourite" role="tabpanel" aria-labelledby="v-pills-favourite-tab">
        <div class="row">
            <!-- card-one start here -->

            @foreach ($favorites as $key => $favorite)
            <div class="col-md-3 mb-3">

                <div class="card shadow-sm border-0 h-100">
                    <div class="position-relative">
                        <div class="images-card">
                            @if ($favorite->favService->profile_photo_path)
                            <img src="{{ asset('saloon_profile/' . $favorite->favService->profile_photo_path) }}" class="card-img-top" height="150px" alt="..." />
                            @else
                            <img src="{{ asset('saloon_profile/dummy.png') }}" class="card-img-top" height="150px" alt="..." />
                            @endif

                            <span id="heart{{ $favorite->favService->id }}" onclick="addFav({{ $favorite->favService->id }})" class="whish position-absolute text-center top-0 end-0 p-1 m-2 bg-white rounded-circle liked">
                                <i class="fa fa-heart text-danger tx-14" aria-hidden="true"></i>
                            </span>


                        </div>
                        <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                            <div class="d-flex">
                                <h1 class="text-theme mb-0 lh-34">20</h1>
                                <p class="rotate text-white tx-9 mb-0">YEARS</p>
                            </div>
                            <p class="text-white mb-0 tx-9">EXPERIENCE</p>
                        </div>
                    </div>

                    @if($favorite->favService->type == 1)
                    <a class="text-dark text-decoration-none" href="{{ url('saloon-view/' . $favorite->favService->id) }}">

                        <div class="card-body p-3">
                            <p class="text-dim tx-12 mb-0"> {{ $favorite->favService->name }}</p>
                            <h6 class="card-title">{{ $favorite->favService->name }}</h6>
                            <div class="d-flex">
                                <div class="stars me-2">
                                    <form action="">
                                        @php
                                        $averageRating = 0; // Initialize average rating to 0
                                        if ($favorite->reviews->count() > 0) {
                                        $averageRating = $favorite->reviews->avg('rating');
                                        }
                                        $averageRating = round($averageRating);
                                        @endphp
                                        @for ($i = 5; $i > 0; $i--)
                                        @php $checked=($i==(int)$averageRating)?'checked':''; @endphp
                                        <input class="star star-{{ $i }}" id="star-{{ $i }}-{{ $favorite->id }}" type="radio" name="star" {{ $checked }} disabled />
                                        <label class="star star-{{ $i }} tx-15" for="star-{{ $i }}-{{ $favorite->id }}"></label>
                                        @endfor
                                        {{-- <!-- <input class="star star-6" id="star-6" type="radio" name="star" />
                                                  <label class="star star-6 tx-15" for="star-6"></label>
                                                  <input class="star star-7" id="star-7" type="radio" name="star" />
                                                  <label class="star star-7 tx-15" for="star-7"></label>
                                                  <input class="star star-8" id="star-8" type="radio" name="star" />
                                                  <label class="star star-8 tx-15" for="star-8"></label>
                                                  <input class="star star-9" id="star-9" type="radio" name="star" />
                                                  <label class="star star-9 tx-15" for="star-9"></label>
                                                  <input class="star star-10" id="star-10" type="radio" name="star" />
                                                  <label class="star star-10 tx-15" for="star-10"></label> -->  --}}
                                    </form>
                                </div>
                                <p class="card-text tx-14">
                                    <i class="fa fa-headphones text-dim" aria-hidden="true"></i>
                                    {{ $favorite->reviews->count() }}
                                </p>
                            </div>

                            <div class="button-section mt-2">
                                @foreach ($favorite->artist_services as $key => $service)
                                <a href="#" class="btn btn{{ $key + 1 }} tx-11 rounded-2 mb-1 p-1">{{ $service->services->name }}</a>
                                @endforeach

                            </div>
                        </div>
                    </a>
                    @else

                    <a class="text-dark text-decoration-none" href="{{ url('view-artist/' . $favorite->favService->id) }}">

                        <div class="card-body p-3">
                            <p class="text-dim tx-12 mb-0"> {{ $favorite->favService->name }}</p>
                            <h6 class="card-title">{{ $favorite->favService->name }}</h6>
                            <div class="d-flex">
                                <div class="stars me-2">
                                    <form action="">
                                        @php
                                        $averageRating = 0; // Initialize average rating to 0
                                        if ($favorite->reviews->count() > 0) {
                                        $averageRating = $favorite->reviews->avg('rating');
                                        }
                                        $averageRating = round($averageRating);
                                        @endphp
                                        @for ($i = 5; $i > 0; $i--)
                                        @php $checked=($i==(int)$averageRating)?'checked':''; @endphp
                                        <input class="star star-{{ $i }}" id="star-{{ $i }}-{{ $favorite->id }}" type="radio" name="star" {{ $checked }} disabled />
                                        <label class="star star-{{ $i }} tx-15" for="star-{{ $i }}-{{ $favorite->id }}"></label>
                                        @endfor
                                        {{-- <!-- <input class="star star-6" id="star-6" type="radio" name="star" />
                                                  <label class="star star-6 tx-15" for="star-6"></label>
                                                  <input class="star star-7" id="star-7" type="radio" name="star" />
                                                  <label class="star star-7 tx-15" for="star-7"></label>
                                                  <input class="star star-8" id="star-8" type="radio" name="star" />
                                                  <label class="star star-8 tx-15" for="star-8"></label>
                                                  <input class="star star-9" id="star-9" type="radio" name="star" />
                                                  <label class="star star-9 tx-15" for="star-9"></label>
                                                  <input class="star star-10" id="star-10" type="radio" name="star" />
                                                  <label class="star star-10 tx-15" for="star-10"></label> -->  --}}
                                    </form>
                                </div>
                                <p class="card-text tx-14">
                                    <i class="fa fa-headphones text-dim" aria-hidden="true"></i>
                                    {{ $favorite->reviews->count() }}
                                </p>
                            </div>

                            <div class="button-section mt-2">
                                @foreach ($favorite->artist_services as $key => $service)
                                <a href="#" class="btn btn{{ $key + 1 }} tx-11 rounded-2 mb-1 p-1">{{ $service->services->name }}</a>
                                @endforeach

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

                    @endif
                    <div class="card-footer bg-white d-flex px-3">
                        <p class="location tx-13 text-dim mb-0">{{ $favorite->favService->address }}
                        </p>
                        <div class="tx-13 ms-2">
                            <i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m
                        </div>
                    </div>
                </div>

            </div>
            @endforeach


            <!-- card-section close here -->
            <!-- card-one start here -->



            <!-- card-section close here -->
        </div>
    </div>
    <div class="tab-pane fade" id="v-pills-booking" role="tabpanel" aria-labelledby="v-pills-booking-tab">

        <div class="row">
            <div class="col-md-12 mt-4">
                <div class="p-3">
                    <h6 class="mb-0">Booking</h6>


                    <div class="col-md-12 mt-4">
                        <div class="card">
                            <div class="table-responsive">
                                <table class="table tx-13  mb-0 table-borded" style="table-layout: fixed;">
                                    <thead>
                                        <tr>
                                            <th scope="col" style="width:100px;">Sr. No.</th>
                                            <th scope="col" style="width:100px;">Service</th>
                                            <th scope="col" style="width:100px;">Discount</th>
                                            <th scope="col" style="width:100px;">Total Price</th>
                                            <th scope="col" style="width:150px;">Booking Date</th>
                                            <th scope="col" style="width:100px;">Scheduled</th>
                                            <th scope="col" style="width:100px;">Username</th>
                                            <th scope="col" style="width:100px;">Phone</th>
                                            <th scope="col" style="width:150px;">Transaction Id</th>
                                            <th scope="col" style="width:150px;">Order Status</th>
                                            <th scope="col" style="width:150px;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (!empty($bookinglist))
                                        @foreach ($bookinglist as $key => $bookings)
                                        <tr>

                                            <td style="width:100px;">
                                                {{ $key + 1 }}
                                            </td>
                                            <td style="width:100px;">
                                                @php $i = 1 @endphp
                                                @foreach ($bookings->BookedServices as $key => $service)
                                                {{ $i++ }} .
                                                {{ $service->Service->name }}
                                                ({{ $service->service_id }})
                                                <br>
                                                @endforeach
                                            </td>

                                            <td style="width:100px;">
                                                ₹ {{ $bookings->discount ?? 0 }}
                                            </td>

                                            <td style="width:100px;">
                                                ₹ {{ $bookings->total_price }}
                                            </td>
                                            <td style="width:100px;">
                                                {{ $bookings->created_at }}
                                            </td>
                                            <td id="sh_{{ $bookings->id }}" style="width:150px;">
                                                {{ $bookings->scheduled_date }}
                                            </td>
                                            <td style="width:100px;">{{ $bookings->user->name }}</td>
                                            <td style="width:100px;">{{ $bookings->user->phone }}</td>
                                            <td style="width:150px;">
                                                {{-- {{ $bookings->salon->name }} ({{ $bookings->saloon_id }}) --}}
                                                {{ $bookings->transaction_id }}
                                            </td>
                                            <td style="width: 150px">
                                                @if($bookings->order_status == 'pending')
                                                <span class="badge bg-warning" id="bookstatus{{$bookings->id}}">{{ $bookings->order_status }}</span>
                                                @elseif($bookings->order_status == 'cancelled')
                                                <span class="badge bg-danger" id="bookstatus{{$bookings->id}}">{{ $bookings->order_status }}</span>
                                                @elseif($bookings->order_status == 'completed')
                                                <span class="badge bg-success" id="bookstatus{{$bookings->id}}">{{ $bookings->order_status }}</span>
                                                @else

                                                @endif
                                            </td>

                                            <td style="width:150px;">
                                                <button class="btn btn-primary btn-sm" data-booking-id="{{ $bookings->id }}" onclick="viewBooking('{{ $bookings->id }}')">View
                                                    Booking</button>
                                            </td>


                                        </tr>
                                        @endforeach
                                        @else
                                        <tr>
                                            Data Not Found
                                        </tr>
                                        @endif


                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>


    </div>


    <div class="tab-pane fade" id="v-pills-earning" role="tabpanel" aria-labelledby="v-pills-earning-tab">

        <div class="row">
            <div class="col-md-12 ">
                <div class="p-3">
                    <h6 class="mb-0">Earning</h6>

                    <div class="col-md-6 mt-3">
                        <h2 class="mb-0 text-primary totalEarning">₹{!! Helper::totalEarning($user->id) ?? 0 !!}</h2>


                    </div>

                    <div class="col-md-12 mt-2">
                        <div class="card">
                            <div class="table-responsive">
                                <table class="table tx-13  mb-0 table-borded">
                                    <thead>
                                        <tr>

                                            <th scope="col">#Sr. No.</th>
                                            <th scope="col">User Name</th>
                                            <th scope="col">Paid Amount</th>
                                            <th scope="col">Services</th>
                                            <th scope="col">Service Date</th>
                                            <th scope="col">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if($bookinglist)
                                        @foreach($bookinglist as $earningKey => $bookinglistearning)
                                        @if($bookinglistearning->order_status == "completed")
                                        <tr>
                                            <td>{{$earningKey+1}}</td>
                                            <td>{{ ucwords($bookinglistearning->user->name)}}</td>
                                            <td>₹{{$bookinglistearning->total_price}}</td>
                                            <td>{{$bookinglistearning->services_count}}</td>
                                            <td>{{$bookinglistearning->scheduled_date}}</td>
                                            <td>{{$bookinglistearning->order_status}}</td>

                                        </tr>

                                        @endif
                                        @endforeach
                                        @endif

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>


    </div>


    <div class="tab-pane fade" id="v-pills-gallery" role="tabpanel" aria-labelledby="v-pills-gallery-tab">

        <!-- <div class="row">
            <div class="col-md-12 ">
                <div class="col-md-4">
                    <div class="p-3">
                        <h6>Upload Photos / Videos</h6>
                        <div class="upload__box mt-3">
                            <div class="upload__btn-box">
                                <label class="upload__btn"> Upload Files <input type="file" multiple="" data-max_length="20" class="upload__inputfile" accept="image/*,video/*">
                                </label>
                            </div>
                            <div class="progress mb-1" style="height: 2px;display:none">
                                <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="row upload__img-wrap"></div>


                            <div class="row g-1">
                                <h6 class="mb-0">Photos</h6>
                                @foreach ($saloon_photos as $saloon_photo)
                                
                                @if($saloon_photo->file_type == "image" || $saloon_photo->file_type == NULL)
                                <div class="col-4">
                                    <div class="bg-light position-relative">
                                        <div class="upload__img-close" data-id="{{ $saloon_photo->id }}" data-type="image">
                                        </div>
                                        <img src="{{ asset('/Saloon_photos/' . $saloon_photo->image_file) }}" alt="alt" class="w-100 overflow-hidden" height="80px">
                                    </div>
                                </div>
                                @endif
                                @endforeach

                            </div>

                            <div class="row upload__video-wrap g-1 mt-3">
                                <h6 class="mb-0 ">Videos</h6>
                                @foreach ($saloon_photos as $saloon_photo)
                                @if($saloon_photo->file_type == "video")
                                <div class="bg-light position-relative">
                                    <div class="upload__img-close" data-id="{{ $saloon_photo->id }}" data-type="video">
                                    </div>
                                    <video width="100%" controls muted>
                                        <source src="{{ asset('/saloonvideos/'.$saloon_photo->image_file) }}" type="video/mp4">
                                    </video>
                                </div>
                                @endif
                                @endforeach
                            </div>

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


            </div>
        </div> -->
        <div class="p-3">
            <h6>Upload Photos/Videos</h6>

            <div class="upload__box mt-3">
                <div class="upload__btn-box">
                    <label class="upload__btn"> Upload Files <input type="file" multiple="" data-max_length="20" class="upload__inputfile" accept="image/*,video/*">
                    </label>
                </div>
                <div class="progress mb-1" style="height: 2px;display:none">
                    <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="row upload__img-wrap"></div>
                <h6 class="my-2">Photos</h6>
                <div class="row gx-1">
                    @foreach ($saloon_photos as $saloon_photo)
                    @if($saloon_photo->file_type == "image")
                    <div class="col-md-3">
                        <div class="bg-light position-relative">
                            <div class="upload__img-close" data-id="{{ $saloon_photo->id }}" data-type="image">
                            </div>
                            <img src="{{ asset('/Saloon_photos/' . $saloon_photo->image_file) }}" alt="alt" class="w-100 overflow-hidden" height="150px">
                        </div>
                    </div>
                    @endif
                    @endforeach

                </div>
                <h6 class="my-2">Videos</h6>
                <div class="row upload__video-wrap gx-1 mt-3">
                    @foreach ($saloon_photos as $saloon_photo)
                    @if($saloon_photo->file_type == "video")
                    <div class="col-md-4">
                        <div class="bg-light position-relative">
                            <div class="upload__img-close" data-id="{{ $saloon_photo->id }}" data-type="video">
                            </div>
                            <video width="100%" controls muted height="200px">
                                <source src="{{ asset('/saloonvideos/'.$saloon_photo->image_file) }}" type="video/mp4">
                            </video>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </div>



            </div>
        </div>

    </div>
</div>

</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="schedule">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Schedule </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="scheduleForm">
                    <div class="mb-2">
                        <input type="hidden" id="bookingId" name="booking_id" value="">
                        <label class="form-label">Select Date</label>
                        <input type="datetime-local" class="form-control" id="scheduleDate" step="1" min="{{ date('Y-m-d') }}">
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-primary" onclick="submitScheduleForm()">Save</button>
            </div>


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


{{-- booking Modal  --}}
<div class="modal fade" id="viewBookingmodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Schedule </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col">
                        <p>Booked By: <span class="username"></span></p>


                    </div>
                    <div class="col">
                        <p>Email: <span class="useremail"></span></p>
                        <p>Phone: <span class="userphone"></span></p>
                    </div>

                </div>
                <hr>

                <div class="row">
                    <span>Booking Detail</span>
                    <div class="col">
                        Scheduled Date:<span class="scheduled"></span>
                        Price:<span class="price"></span>
                        Discount<span class="discount"></span>
                        Total Price:<span class="total_price"></span>
                    </div>
                    <div class="col">
                        Payment Status:<span class="paymentStatus"></span>
                        Transaction Id:<span class="transaction"></span>
                        Total services: <span class="serviceCount"></span>
                        Order Status:<span class="artistbookingStatus"></span>
                    </div>
                </div>
                <hr>

                <div class="bookedServices">
                    <h6>Booked Services</h6>
                </div>

                <button class="btn btn-primary btn-sm" data-booking-id="" id="schedulebookingId" onclick="scheduleBooking()">Schedule</button>

                <button class="btn btn-primary btn-sm" data-booking-id="" id="completebookingId" onclick="completebooking()">Complete</button>
                <a class="btn btn-danger text-decoration-none cancelOrderButton" data-order-id="" href="#">Cancel</a>
                <h4 class="statusContainer"></h4>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>


        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function viewBooking(bookingId) {
        // Set the booking ID in the modal
        $('#bookingId').val(bookingId);
        $('#viewBookingmodal').modal('show');

        var url = '{{ url("/artist/viewArtistBooking") }}/' + bookingId;
        $.ajax({
            url: url,
            method: 'GET',
            success: function(response) {
                $('.booking_id').val(response.data.id);
                $('.username').text(response.data.user_name);
                $('.useremail').text(response.data.user_mail);
                $('.userphone').text(response.data.user_phone);
                $('.scheduled').text(response.data.scheduled_date);
                $('.price').text(response.data.price);
                $('.discount').text(response.data.discount);
                $('.total_price').text(response.data.total_price);
                $('.paymentStatus').text(response.data.payment_status);
                $('.transaction').text(response.data.transaction_id);
                $('.serviceCount').text(response.data.services_count);
                $('.artistbookingStatus').text(response.data.order_status);

                $('.cancelOrderButton').attr('data-order-id', response.data.id);
                var artiststatus = $('.artistbookingStatus').text();

                $('#schedulebookingId').attr('data-booking-id', response.data.id);
                $('#completebookingId').attr('data-booking-id', response.data.id);

                if (artiststatus === "cancelled" || artiststatus === "completed") {

                    event.preventDefault();
                    $('.cancelOrderButton').hide();
                    $('#schedulebookingId').hide();
                    $('#completebookingId').hide();

                    $('.statusContainer').html('');
                    $('.statusContainer').append('<span class="cancelledStatus">' + response.data.order_status + '</span>');

                } else {
                    $('.cancelOrderButton').show();
                    $('#schedulebookingId').show();
                    $('#completebookingId').show();
                    $('.cancelledStatus').remove();
                }

                $('.bookedServices').html('');
                $.each(response.data.booked_service, function(key, value) {
                    // You can customize the HTML structure here based on your data
                    $('.bookedServices').append(
                        '<h6>Booked Services</h6><div class="row services"><div class="col"><p><strong>' +
                        key + ':</strong> ' + value.service_name +
                        '<br><strong>Sub Service:</strong> ' + value.subService_name +
                        '</p></div><div class="col"><p>Price: <span class="serviceprice"> ' +
                        value.price + '</span></p><p>Quantity: <span class="quantty">  ' + value
                        .quantity + ' </span></p></div></div><hr>');
                });


            },
            error: function(error) {
                console.error('Error:', error);
            }
        });


    }


    // Schedule Booking
    function scheduleBooking() {
        // Set the booking ID in the modal
        var bookId = $('#schedulebookingId').attr('data-booking-id');

        $('#viewBookingmodal').modal('hide');

        $('#schedule').modal('show');
    }

    // Submit the form
    function submitScheduleForm() {
        // Get the selected date and booking ID
        var selectedDate = $('#scheduleDate').val();
        var bookingId = $('#bookingId').val();
        var artschurl = "{{url('artist/schedule_artist_booking')}}";

        $.ajax({
            type: 'POST',
            url: artschurl, // Replace with your actual endpoint
            data: {
                '_token': '{{ csrf_token() }}',
                'schedule_date': selectedDate,
                'booking_id': bookingId
            },
            success: function(data) {
                $('#schedule').modal('hide');
                var booking_Id = $('#bookingId').val();
                $('#sh_' + booking_Id).text(data.schedule_date);
                $('#scheduleForm')[0].reset();

                $('#viewBookingmodal').modal('hide');
                $('#schedule').modal('hide');

            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }


    function completebooking() {

        var bookingId = $('#completebookingId').attr('data-booking-id');
        var url = '{{url("/artist/mark_bookingComplete")}}' + '/' + bookingId;


        $.ajax({
            type: 'POST',
            url: url, // Replace with your actual endpoint
            data: {
                '_token': '{{ csrf_token() }}',
                'booking_id': bookingId
            },
            success: function(response) {

                // $('#viewBookingmodal').html('');
                console.log(response);
                $('.booking_id').val(response.data.id);
                $('.username').text(response.data.user_name);
                $('.useremail').text(response.data.user_mail);
                $('.userphone').text(response.data.user_phone);
                $('.scheduled').text(response.data.scheduled_date);
                $('.price').text(response.data.price);
                $('.discount').text(response.data.discount);
                $('.total_price').text(response.data.total_price);
                $('.paymentStatus').text(response.data.payment_status);
                $('.transaction').text(response.data.transaction_id);
                $('.serviceCount').text(response.data.services_count);
                $('.artistbookingStatus').text(response.data.order_status);

                $('.cancelOrderButton').attr('data-order-id', response.data.id);
                var status = $('.artistbookingStatus').text();

                $('#schedulebookingId').attr('data-booking-id', response.data.id);
                $('#completebookingId').attr('data-booking-id', response.data.id);



                if (status === "cancelled" || status === "completed") {
                    event.preventDefault();
                    $('.cancelOrderButton').hide();
                    $('#schedulebookingId').hide();
                    $('#completebookingId').hide();

                }

                if (status === "cancelled") {
                    $('#bookstatus' + bookingId).removeClass();
                    $('#bookstatus' + bookingId).addClass('badge bg-danger');
                    $('#bookstatus' + bookingId).text(status);

                }
                if (status === "completed") {
                    $('#bookstatus' + bookingId).removeClass();
                    $('#bookstatus' + bookingId).addClass('badge bg-success');
                    $('#bookstatus' + bookingId).text(status);

                }
                if (status === "pending") {
                    $('#bookstatus' + bookingId).removeClass();
                    $('#bookstatus' + bookingId).addClass('badge bg-warning');
                    $('#bookstatus' + bookingId).text(status);

                }

                $('.bookedServices').html('');
                $.each(response.data.booked_service, function(key, value) {
                    // You can customize the HTML structure here based on your data
                    $('.bookedServices').append(
                        '<h6>Booked Services</h6><div class="row services"><div class="col"><p><strong>' +
                        key + ':</strong> ' + value.service_name +
                        '<br><strong>Sub Service:</strong> ' + value.subService_name +
                        '</p></div><div class="col"><p>Price: <span class="serviceprice"> ' +
                        value.price + '</span></p><p>Quantity: <span class="quantty">  ' + value
                        .quantity + ' </span></p></div></div><hr>');
                });

                $('#viewBookingmodal').modal('hide');


            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }
</script>
<script>
    //    $('#select-subs-service').on('change', function() {
    //         let val = $(this).val();
    //         var selectedText = $('#select-subs-service option:selected').text();
    //         console.log("vxnvcb", selectedText);
    //         if (selectedText.toLowerCase() === 'other') {
    //             $("#other").removeClass('d-none');
    //         } else {
    //             $("#other").addClass('d-none');
    //         }
    //     });

    $('#select-subs-service').on('change', function() {
        let val = $(this).val();

        var service_val = $('#select-service option:selected').text().trim();
        console.log("dkfkd", service_val);
        var selectedText = $('#select-subs-service option:selected').text();
        if (selectedText.toLowerCase() === 'other') {
            $("#other").removeClass('d-none');
            if (service_val.toLowerCase() === 'other') {
                $("#other").removeClass('d-none');
                $("#service_other").removeClass('d-none');
            }
        } else {
            $("#service_other").addClass('d-none');
            $("#other").addClass('d-none');
        }
    });

    $('#select-service').on('change', function() {
        var idService = this.value;
        $('#other').addClass('d-none');
        $('#service_other').addClass('d-none');
        $("#select-subs-service").html('');
        $.ajax({
            url: "{{ url('api/fetchSubCategory') }}",
            type: "POST",
            data: {
                service_id: idService,
                _token: '{{ csrf_token() }}'
            },
            dataType: 'json',
            success: function(result) {
                $('#select-subs-service').html(
                    '<option value="">-- Select Subcategory --</option>');
                $.each(result.subcategories, function(key, value) {
                    $("#select-subs-service").append('<option value="' + value
                        .id + '">' + value.name + '</option>');
                });
                // $.each(result.subcategories, function (key, value) {
                //     var optionHtml = '<option value="' + value.id + '">' + value.name + '</option>';
                //     $("#select-subs-service").append(optionHtml);
                // });

                // // Find the "Other" option and move it to the end
                // $("#select-subs-service option:contains('Other')").appendTo("#select-subs-service");


            }
        });
    });



    /// edit services 


    $('#edit-select-subs-service').on('change', function() {
        let val = $(this).val();
        var service_val = $('#edit-select-service option:selected').text().trim();
        console.log("dkfkd", service_val);
        var selectedText = $('#edit-select-subs-service option:selected').text();
        if (selectedText.toLowerCase() === 'other') {
            $("#edit_other").removeClass('d-none');

            if (service_val.toLowerCase() === 'other') {
                $("#edit_other").removeClass('d-none');
                $("#edit_service_other").removeClass('d-none');
            }
        } else {
            $("#edit_service_other").addClass('d-none');
            $("#edit_other").addClass('d-none');
        }
    });

    $('#edit-select-service').on('change', function() {
        var idService = this.value;
        $('#edit_other').addClass('d-none');
        $('#edit_service_other').addClass('d-none');
        $("#edit-select-subs-service").html('');
        $.ajax({
            url: "{{ url('api/fetchSubCategory') }}",
            type: "POST",
            data: {
                service_id: idService,
                _token: '{{ csrf_token() }}'
            },
            dataType: 'json',
            success: function(result) {
                let rss = result.subcategories.length;

                $('#edit-select-subs-service').html('<option value="">-- Select Subcategory --</option>');
                $.each(result.subcategories, function(key, value) {
                    $("#edit-select-subs-service").append('<option value="' + value.id + '">' + value.name + '</option>');
                });

            }
        });
    });


    // edit service 
    $("#edit-button-addon").click(function(e) {
        e.preventDefault();
        $("#edit-button-addon").prop("disabled", true);
        var data = $('#edit-service-form').serialize();
        var subc = $("#edit-select-subs-service").val();
        console.log("Subcategory =", subc);

        // Check if service and sub-service are selected
        if (subc == "" || subc == "NULL") {
            alert("Please Select Service and SubService");
            $("#edit-button-addon").prop("disabled", false);
            return false;
        }

        // Check for additional fields based on your requirements
        // You can adapt this part to match your specific form fields
        let otherElement = $("#edit_other");
        let service_other = $("#edit_service_other");
        if (!otherElement.hasClass("d-none") && !service_other.hasClass("d-none")) {
            let otherValue = otherElement.val();
            let otherValue2 = service_other.val();
            if (otherValue === "" || otherValue2 === "") {
                alert("Please Enter Sub Service and Service");
                $("#edit-button-addon").prop("disabled", false);
                return false;
            }
        } else if (!otherElement.hasClass("d-none")) {
            let otherValue = otherElement.val();
            if (otherValue == "") {
                alert("Please Enter Sub Service");
                $("#edit-button-addon").prop("disabled", false);
                return false;
            }
        } else if (!service_other.hasClass("d-none")) {
            let otherValue2 = service_other.val();
            if (otherValue2 == "") {
                alert("Please Enter Service");
                $("#edit-button-addon").prop("disabled", false);
                return false;
            }
        }

        var gender = $("#edit_gender").val();
        if (gender == "" || gender == "NULL") {
            alert("Please Select Gender");
            $("#edit-button-addon").prop("disabled", false);
            return false;
        }

        // Adjust the URL and other parameters based on your backend implementation
        let categoryId = $("#main_service_id").val();

        console.log(data);
        $.ajax({
            type: 'post',
            url: "{{ route('api.updateCategory', ['id' => ':id']) }}".replace(':id', categoryId),
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $('#edit_existing').html('....Please wait');
            },
            success: function(responseJSON) {
                if (responseJSON.error === "Service Already exists") {
                    toastr.error('Service Already exists', 'Error');
                } else {
                    //window.location.reload();
                    // Adjust the following function based on how you want to handle the response
                    handleEditSuccess(responseJSON.data);
                    toastr.success('Service Edited', 'Success');
                    $('#exampleModal').modal('hide');

                }

                // Adjust form reset and any other necessary actions
                $('#edit-service-form')[0].reset();
                localStorage.setItem('getservices', 'true');
                $("#edit-button-addon").prop("disabled", false);
            },
            error: function(xhr, status, error) {
                toastr.error('Internal Server Error', 'Error');
                console.log(error);
                $("#edit-button-addon").prop("disabled", false);
            }
        });
    });
    // Function to handle the success response for editing
    function handleEditSuccess(data) {
        console.log('handleEditSuccess called with data:', data);

        var serviceId = data.id;

        // Iterate through each row in the table
        $('#services-list-table tbody tr').each(function() {
            var currentRow = $(this);
            var rowServiceId = currentRow.data('service-id');

            // Check if the current row has the matching service ID
            if (rowServiceId === serviceId) {
                console.log('Table row found:', currentRow);

                // Update the content of each column in the table row
                currentRow.find('td:eq(1)').text(data.service);
                currentRow.find('td:eq(2)').text(data.subservice);
                currentRow.find('td:eq(3)').text(data.gender);
                currentRow.find('td:eq(4)').text(data.duration);
                currentRow.find('td:eq(5)').text(data.price);

                return false; // Exit the loop once the row is found
            }
        });
    }



    // add services
    $("#button-addon2").click(function(e) {
        e.preventDefault();
        var data = $('#service-form').serialize();
        $("#button-addon2").prop("disabled", true);




        let otherElement = $("#other");
        let service_other = $("#service_other");
        if (!otherElement.hasClass("d-none") && !service_other.hasClass("d-none")) {
            let otherValue = otherElement.val();
            let otherValue2 = service_other.val();
            if (otherValue === "" || otherValue2 === "") {
                alert("Please Enter Sub Service and Service");
                $("#button-addon2").prop("disabled", false);
                return false;
            }
        } else if (!otherElement.hasClass("d-none")) {
            let otherValue = otherElement.val();
            console.log(otherValue);
            if (otherValue == "") {
                alert("Please Enter Sub Service");
                $("#button-addon2").prop("disabled", false);
                return false;
            }
        } else if (!service_other.hasClass("d-none")) {
            let otherValue2 = service_other.val();
            console.log(otherValue2);
            if (otherValue2 == "") {
                alert("Please Enter Service");
                $("#button-addon2").prop("disabled", false);
                return false;
            }
        }
        var gender = $("#gender").val();
        if (gender == "" || gender == "NULL") {
            alert("Please Select Gender");
            $("#button-addon2").prop("disabled", false);
            return false;
        }



        $.ajax({
            type: 'post',
            url: "{{ route('api.storeCategory') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $('#create_new').html('....Please wait');
            },
            success: function(responseJSON) {
                if (responseJSON.error === "Service Already exists") {
                    toastr.error('Service Already exists', 'Error');
                } else {
                    console.log();
                    populateTable(responseJSON.data);
                    toastr.success('Service Added', 'Success');
                }
                // populateTable(responseJSON.data);
                $('#service-form')[0].reset();
                localStorage.setItem('getservices', 'true');
                $("#button-addon2").prop("disabled", false);

            },
            error: function(xhr, status, error) {
                console.log(error);
                $("#button-addon2").prop("disabled", false);
            }
        });
    });


    function populateTable(data) {
        console.log("dfas",data);
        var tableBody = $('#data-table tbody'); // Select the table body

        var newRow = $('<tr>');
        newRow.append($('<td style="width:100px;">').text(data.id));
        newRow.append($('<td style="width:160px;">').text(data.service));
        newRow.append($('<td style="width:200px;">').text(data.subservice));
        newRow.append($('<td style="width:100px;">').text(data.gender));
        newRow.append($('<td style="width:100px;">').text(data.duration));
        newRow.append($('<td style="width:100px;">').text(data.price));

        var id = data.id;

        function generateDeleteButton(id) {
            return "<a class='btn' data-bs-toggle='modal' data-bs-target='#exampleModal' data-service-id='"+data.id+"' data-service-name='"+data.subservice +"' data-subservice-name='"+ data.subservice + "' data-gender='"+ data.gender + "' data-duration='"+ data.duration + "' data-price='"+ data.price + "' data-subservice-id='"+ data.subservice + "'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></a><a href='javascript:void(0);' class='btn' onclick='confirmDeleteService(" + id + ");'>" +
                "<i class='fa fa-trash-o' aria-hidden='true'></i>" +
                "</svg>" +
                "</a>";
        }

        newRow.append($('<td>').html(generateDeleteButton(data.id)));
        // You can also add an "Edit/Delete" column if needed, but it's currently empty in your example.

        tableBody.append(newRow);

    }
</script>

<script type="text/javascript">
    function confirmDeleteService(userserviceId) {

        var url = "{{ url('/artist/delete_user_services/') }}";
        Swal.fire({
            title: 'Are you sure you want to delete this service?',
            // icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // The "OK" button was clicked
                // Perform your AJAX call here
                $.ajax({
                    url: url,
                    data: {
                        serviceId: userserviceId
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }, // Replace with your actual URL
                    method: 'POST',
                    // or 'POST' depending on your route configuration
                    success: function(response) {
                        // Handle the AJAX success response
                        location.reload();
                        localStorage.setItem('getservices', 'true');


                    },
                    error: function(xhr, status, error) {
                        // Handle the AJAX error
                        console.error(error);
                    }
                });
            }
        });
    }
</script>
@endsection