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

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

<div class="bg-main-body">
    <div class="container">
        <div class="row py-5">


            @if (session()->has('success'))
            <div class="alert alert-success text-center py-1">
                {{ 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">{{ Auth::user()->name ?? 'No Name' }}</span>
                    <!-- <span class="text-black-50">edogaru@mail.com.my</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  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">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 " 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>
                    </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">

                        <form action="{{ route('user.userProfileUpdate') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="p-3">
                                <div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h6>Personal Details</h6>
                                            <p class="text-dim tx-12">{{-- $user->bio --}}</p>
                                        </div>
                                        <!--new row section start here-->
                                        <div Class="row">
                                            <div class="col-md-4">
                                                <div class="my-3">
                                                    <label class="form-label">Full
                                                        Name</label>
                                                    <input type="text" class="form-control border-pink tx-12 p-2" id="Name" placeholder="Enter here..." name="name" autocomplete="off" value="{{ $user->name }}">
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="my-3">
                                                    <label class="form-label">Mobile</label>
                                                    <input type="text" class="form-control border-pink tx-12  p-2" id="no" placeholder="Enter here..." name="phone" autocomplete="off" 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;">
                                                    <p>{{ $errors->first('phone') }}.</p>
                                                    </span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="my-3">
                                                    <label class="form-label">E-Mail</label>
                                                    <input type="email" class="form-control border-pink tx-12  p-2" id="eml" placeholder="Enter here..." name="email" value="{{ $user->email }}" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label class="form-label">Gender</label>
                                                    <select class="form-select border-pink tx-12 p-2" aria-label="Default select example" id="gender" name="gender">
                                                        <option value="male" {{ $user->gender == 'male' ? ' selected' : '' }}>
                                                            male
                                                        </option>
                                                        <option value="female" {{ $user->gender == 'female' ? ' selected' : '' }}>
                                                            female
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            {{-- <div class="col-md-4">
                                                            <div class="mb-3">
                                                                <label class="form-label">D.O.B</label>
                                                                <input type="email" class="form-control border-pink tx-12 p-2"
                                                                    id="dob" placeholder="Enter here..." name="name"
                                                                    autocomplete="off">
                                                            </div>
                                                        </div>  --}}

                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label class="form-label">Location</label>
                                                    <select class="form-select border-pink tx-12  p-2" name="city" aria-label="Default select example" id="location">
                                                        <option value="himachal" {{ $user->city == 'himachal' ? ' selected' : '' }}>
                                                            himachal
                                                        </option>
                                                        <option value="chandigharh" {{ $user->city == 'chandigharh' ? ' selected' : '' }}>
                                                            chandigharh</option>
                                                            <option value="mohali" {{ $user->city == 'mohali' ? ' selected' : '' }}>
                                                                Mohali</option>

                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Address</label>
                                                    <textarea class="form-control border-pink tx-12" id="exampleFormControlTextarea1" name="address" rows="3">{{ $user->address }}</textarea>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Bio</label>
                                                    <textarea class="form-control border-pink tx-12" id="exampleFormControlTextarea1" name="bio" rows="3">{{ $user->bio }}</textarea>
                                                </div>
                                            </div>


                                        </div>

                                        <div class="col-md-12">
                                            <button class="btn px-5  hax bg-green" type="submit">Update</button>

                                        </div>
                                    </div>
                                </div>
                                <!--new row section end here-->
                            </div>
                    </div>
                    </form>



                    {{-- <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" 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 }}">
                                {{ $latestService->name }}
                            </option>
                            @endforeach
                        </select>
                        <select class="form-select" aria-label="Default select example" name="subservice_id" id="select-subs-service">

                        </select>
                        <select class="form-select" aria-label="Default select example" name="gender">
                            <option selected="">Select Gender</option>
                            <option value="M">Male</option>
                            <option value="F">Female</option>
                            s
                        </select>
                        <input type="number" placeholder="Time Duration" class="form-control" id="" name="duration">
                        <input type="text" placeholder="Enter Price" class="form-control" id="" name="price">

                        <button class="btn btn-primary rounded-1" type="button" id="button-addon2">Add</button>
                    </div>
                    </form>
                </div>
            </div>
            <div class="col-md-12 mt-4">
                <div class="card">
                    <table class="table tx-13  mb-0 table-borded" id="service
                                        s-list-table">
                        <thead>
                            <tr>
                                <th scope="col">Sr. No.</th>
                                <th scope="col">Service</th>
                                <th scope="col">Sub Services</th>
                                <th scope="col">Gender</th>
                                <th scope="col">Duration</th>
                                <th scope="col">Price</th>
                                <th scope="col">Edit/Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($userservices as $key => $userservice)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $userservice->services->name }}</td>
                                <td>{{ $userservice->subservices->name ?? '' }}</td>
                                <td>{{ $userservice->gender }}</td>
                                <td>{{ $userservice->duration }}</td>
                                <td>{{ $userservice->price }}</td>
                                <td>
                                    <a href="javascript:void(0);" class="btn" onclick="confirmDeleteService({{ $userservice->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>
                                </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 class="tab-pane fade" id="v-pills-favourite" role="tabpanel" aria-labelledby="v-pills-favourite-tab">
    <div class="row">
        <!-- card-one start here -->

        <h6>My Favorites</h6>
        @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">
                        
                            @if($favorite->favService->type  == 1)
                                Saloon
                            @elseif($favorite->favService->type  == 2)
                                Artist
                            @else
                                Unknown Type
                            @endif
                        </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"> {{-- ucwords($favorite->favService->name) --}}</p>
                        <h6 class="card-title">{{ ucwords($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
                                   
                                </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="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 style="width: 80px">Sr. No.</th>
                                    <th style="width: 150px">Service</th>
                                    <th style="width: 100px">Discount</th>
                                    <th style="width: 150px">Total Price</th>
                                    <th style="width: 150px">Booking Date</th>
                                    <th style="width: 150px">Scheduled</th>
                                    <th style="width: 150px">Service Provider</th>
                                    <th style="width: 100px">Phone</th>
                                    <th style="width: 180px">Transaction Id</th>
                                    <th style="width: 150px">Status</th>
                                    <th style="width: 150px">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (!empty($bookinglist))
                                @foreach ($bookinglist as $key => $bookings)
                               
                                <tr>

                                    <td style="width: 80px">
                                        {{ $key + 1 }}
                                    </td>
                                    <td style="width: 150px">
                                        @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">
                                        @if($bookings->discount)₹ {{ $bookings->discount }} @else N/A @endif
                                    </td>

                                    <td style="width: 150px">
                                        ₹ {{ $bookings->total_price }}
                                    </td>
                                    <td style="width: 150px">
                                        {{ $bookings->created_at }}

                                    </td>

                                    <td id="sh_{{ $bookings->id }}" style="width: 150px">
                                        {{ $bookings->scheduled_date }}
                                    </td>
                                    
                                    <td style="width: 150px">{{ ucwords(optional($bookings->salon)->name) }}</td>
                                    <td style="width: 100px">{{ optional($bookings->salon)->phone }}</td>
                                    <td style="width: 180px">
                                        {{-- {{ $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="viewUserBooking('{{ $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>
</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>



</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><br>
                        Order Status:<span class="bookingStatus"></span>
                    </div>
                </div>
                <hr>

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

                <a class="text-decoration-none text-danger 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>
    $('#select-service').on('change', function() {
        var idService = this.value;

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

            }
        });
    });

    function ucwords(str) {
        return str.replace(/\b\w/g, function (char) {
            return char.toUpperCase();
        });
    }

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

        var url = '{{ url("/user/viewUserBooking") }}/' + bookingId;
        $.ajax({
            url: url,
            method: 'GET',
            success: function(response) {
         
                $('.booking_id').val(response.data.id);
                // $('.username').text(response.data.user_name);
                $('.username').text(ucwords(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 bookingstatus = $('.bookingStatus').text();

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

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

                    event.preventDefault();
                    $('.cancelOrderButton').hide();

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

                }else{
                    $('.cancelOrderButton').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+1) + ':</strong> ' + ucwords(value.service_name) +
                        '<br><strong>Sub Service:</strong> ' + ucwords(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);
            }
        });


    }



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

        $.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) {
                console.log(responseJSON);
                populateTable(responseJSON.data);

            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });
    });


    function populateTable(data) {

        var tableBody = $('#data-table tbody'); // Select the table body

        var newRow = $('<tr>');
        newRow.append($('<td style="width:99px;">').text(data.id));
        newRow.append($('<td style="width:151px;">').text(data.service));
        newRow.append($('<td style="width: 242px;">').text(data.subservice));
        newRow.append($('<td style="width: 179px;">').text(data.gender));
        newRow.append($('<td style="width: 180px;">').text(data.duration));
        newRow.append($('<td style="width: 151px;">').text(data.price));


        newRow.append($('<td>').text('--'));



        // 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('saloon/deleteuserservices/') }}" + '/' + userserviceId;
        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) {
                alert(result.isConfirmed);
                // The "OK" button was clicked
                // Perform your AJAX call here
                $.ajax({
                    url: 'deleteuserservices/' + userserviceId,
                    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();

                        console.log(response);
                    },
                    error: function(xhr, status, error) {
                        // Handle the AJAX error
                        console.error(error);
                    }
                });
            }
        });
    }

   
</script>

@endsection