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

@section('content')
<div class="bg-main-body">

    <!-- Define the content section -->
    <div class="container rounded  py-4">
        <div class="row">


            @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-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>
                        <button class="nav-link text-start " 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>

                    </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('saloon.SaloonProfileUpdate') }}" 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">Saloon Name</label>
                                                <input type="text" class="form-control" placeholder="enter name" name="name" value="{{ $user->name ?? '' }}">
                                                @if ($errors->has('name'))
                                                <span style="color:red;">
                                                    <strong>{{ $errors->first('name') }}.</strong>
                                                </span>
                                                @endif
                                            </div>
                                            <div class="col-md-6 mb-3"><label class="form-label">Mobile Number</label>
                                                <input type="text" 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="" name="bio" value="">{{ $user->bio ?? '' }}</textarea>

                                                @if ($errors->has('bio'))
                                                <span style="color:red;">
                                                    <strong>{{ $errors->first('bio') }}.</strong>
                                                </span>
                                                @endif
                                            </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">
                                            </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="mt-2"><button class="btn btn-primary profile-button" type="submit">Save
                                                    Profile</button></div>
                                        </div>
                                    </form>
                                </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 mt-4">
                                <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" required>
                                                    <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="number" placeholder="Time Duration" class="form-control tx-12" id="" name="duration">
                                                <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 btn-secondary rounded-0">Clear</button>
                                            </div>
                                        </form>
                                    </div>

                                    <div class="col-md-12 mt-4">
                                        <div class="card">
                                            <div class="table-responsive">
                                                <table class="table tx-12  mb-0 table-borded" id="services-list-table" style="table-layout: fixed;">
                                                    <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-13  mb-0 table-borded" id="data-table">
                                                    <tbody id="data-table-body">
                                                    </tbody>
                                                </table>
                                            </div>
                                        </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">

                            @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

                        </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 ">
                                <div class="p-3">
                                    <h6 class="mb-0">Booking</h6>

                                    <div class="row mt-3">


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

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

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

                                                                <td style="width:150px;">
                                                                    ₹ {{ $bookings->total_price }}
                                                                </td>
                                                                <td style="width:100px;">
                                                                    {{ $bookings->created_at }}
                                                                </td>
                                                                <td id="sh_{{ $bookings->id }}" style="width:100px;">
                                                                    {{ $bookings->scheduled_date }}
                                                                </td>
                                                                <td style="width:100px;">{{ ucwords($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 btn-sm bg-warning" id="bookstatus{{$bookings->id}}">{{ $bookings->order_status }}</span>
                                                                    @elseif($bookings->order_status == 'cancelled')
                                                                    <span class="badge btn-sm  bg-danger" id="bookstatus{{$bookings->id}}">{{ $bookings->order_status }}</span>
                                                                    @elseif($bookings->order_status == 'completed')
                                                                    <span class="badge btn-sm  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>


                    <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>
                                                        @foreach($bookinglist as $earningKey => $bookinglistearning)
                                                        @if($bookinglistearning->order_status == "completed")
                                                        <tr>
                                                            <td>{{$earningKey+1}}</td>
                                                            <td>{{$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

                                                    </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="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 mb-1">
                                        <div class="bg-light position-relative">
                                            <div class="upload__img-close" data-id="{{ $saloon_photo->id }}" data-type="image">
                                            </div>
                                            
                                            <input type="checkbox" id="vehicle1" data-id="{{ $saloon_photo->id }}" class="position-absolute p-1" name="vehicle1" value="Bike" onclick="updateSliderImages(this)" {{ $saloon_photo->show_image ? 'checked' : '' }}>
                                           
                                            <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') }}" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-min-date="0">
                    </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 class="tx-12 mb-1"><b>Name: </b> <span class="username text-dim"></span></p>
                        <p class="tx-12 mb-1"><b>Email: </b> <span class="useremail text-dim"></span></p>
                        <p class="tx-12 mb-1"><b>Phone: </b> <span class="userphone text-dim"></span></p>
                    </div>

                </div>
                <hr>

                <div class="row">
                    <h6>Booking Detail</h6>
                    <div class="col">
                        <p class="tx-12 mb-1"><b>Scheduled Date:</b> <span class="scheduled text-dim"></span></p>
                        <p class="tx-12 mb-1"><b>Price:</b> <span class="price text-dim"></span></p>
                        <p class="tx-12 mb-1"><b>Discount:</b> <span class="discount text-dim"></span></p>
                        <p class="tx-12 mb-1"><b>Total Price:</b> <span class="total_price text-dim"></span></p>
                    </div>
                    <div class="col">
                        <p class="tx-12 mb-1"><b>Payment Status:</b> <span class="paymentStatus text-dim"></span></p>
                        <p class="tx-12 mb-1"><b>Transaction Id:</b> <span class="transaction text-dim"></span></p>
                        <p class="tx-12 mb-1"><b>Total services:</b> <span class="serviceCount text-dim"></span></p>
                        <p class="tx-12 mb-1"><b>Order Status:</b> <span class="bookingStatus text-dim"></span></p>
                    </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>
                <h6 class="statusContainer"></h6>

            </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 updateSliderImages(checkbox) {
        var photoId = checkbox.getAttribute('data-id');
        var isChecked = checkbox.checked ? '1' : '0';
        toastr.options.preventDuplicates = true;
        $.ajax({
            type: "POST",
            url: "{{ route('saloon.slider_images') }}",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                photo_id: photoId,
                status: isChecked
            },
            success: function(response) {
                // Handle success, if needed
                toastr.success('Slider Images Updated Successfully', 'Success');
                console.log(response);
            },
            error: function(error) {
                // Handle error, if needed
                console.error(error);
            }
        });
    }
</script>

<script>
    function viewBooking(bookingId) {
        // Set the booking ID in the modal
        $('#bookingId').val(bookingId);
        $('#viewBookingmodal').modal('show');

        var url = '{{ url("saloon/viewBooking")}}/' + 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);
                $('.bookingStatus').text(response.data.order_status);

                $('.cancelOrderButton').attr('data-order-id', response.data.id);
                var status = $('.bookingStatus').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();

                    $('.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 class="tx-12 mb-1"><strong>' +
                        key + ':</strong> ' + value.service_name +
                        '<br><strong>Sub Service:</strong> ' + value.subService_name +
                        '</p></div><div class="col"><p class="tx-12 mb-1"><b>Price:</b> <span class="serviceprice"> ' +
                        value.price + '</span></p><p class="tx-12 mb-1"><b>Quantity:</b> <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 bookingId = $('#schedulebookingId').attr('data-booking-id');
        $('#bookingId').val(bookingId);
        $('#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 = "{{route('artist.schedule_artistbooking')}}";

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

                alert('Date scheduled successfully!');
                $('#schedule').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(val){
    //         $("#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) {
                let rss = result.subcategories.length;

                $('#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>');
                });

            }
        });
    });


    /// 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 {
    
    //                 // Adjust the following function based on how you want to handle the response
    //                 handleEditSuccess(responseJSON.data);
    //                 toastr.success('Service Edited', 'Success');

    //             }

    //             // 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);
    //         }
    //     });
    // });








    // add services
    $("#button-addon2").click(function(e) {
        e.preventDefault();
        $("#button-addon2").prop("disabled", true);
        var data = $('#service-form').serialize();
        var subc = $("#select-subs-service").val();
        console.log("fb =", subc);
        if (subc == "" || subc == "NULL") {
            alert("Please Select Service and SubService");
            $("#button-addon2").prop("disabled", false);
            return false;
        }

        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;
        }
        // let service_other = $("#service_other").val();
        // service_other == "" ? alert("Enter Sub Service") : "";

        $.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) {
                //responseJSON.error === "Service Already exists" ? toastr.error('Service Already exists','Error') : populateTable(responseJSON.data);

                if (responseJSON.error === "Service Already exists") {
                    toastr.error('Service Already exists', 'Error');
                } else {
                    populateTable(responseJSON.data);
                    toastr.success('Service Added', 'Success');
                }

                $('#service-form')[0].reset();
                localStorage.setItem('getservices', 'true');
                $("#button-addon2").prop("disabled", false);

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

        });

    });

    // edit service
    // Edit services
    $("#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 {
                    
                    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
            }
        });
    }


    function populateTable(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:100px;">').text(rowCount));
        newRow.append($('<td style="width:150px;">').text(data.service));
        newRow.append($('<td style="width:150px;">').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>";
        }
        // function generateDeleteButton(id) {
        //     return "<a href='javascript:void(0);' class='btn' onclick='confirmDeleteService(" + id + ");'>" +
        //         "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash3-fill' viewBox='0 0 16 16'>" +
        //         "<path d='M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z'/>" +
        //         "</svg>" +
        //         "</a>";
        // }

        newRow.append($('<td style="width:100px;">').html(generateDeleteButton(data.id)));
        tableBody.append(newRow);
        //var rowCount = $('#services-list-table tr').length;
        // $('#services-list-table tr:last td:first').text(rowCount);
        // console.log('Number of <tr> elements:', rowCount);

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

        var url = "{{ url('/saloon/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();
                        $('#services-list-table tbody').find('tr[data-id="' + userserviceId + '"]').remove();
                        //Swal.fire('Deleted!', 'Service has been deleted.', 'success');
                        toastr.success('Service has been deleted', 'Success')
                        console.log(response);
                        localStorage.setItem('getservices', 'true');

                    },
                    error: function(xhr, status, error) {
                        // Handle the AJAX error
                        toastr.error('Internal Server Error', 'Error')
                        //console.error(error);
                    }
                });
            }
        });
    }
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var today = new Date().toISOString().split('T')[0];
        document.getElementById('scheduleDate').min = today;
    });


    function completebooking() {

        var bookingId = $('#completebookingId').attr('data-booking-id');
        var url = '{{url("/saloon/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('');

                $('.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);
                $('.bookingStatus').text(response.data.order_status);

                $('.cancelOrderButton').attr('data-order-id', response.data.id);
                var status = $('.bookingStatus').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();

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

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


                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>
@endsection