@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({{ asset('saloon_profile/' . $user->profile_photo_path) }});">
                            </div>
                        </div>
                    </div>
                    <span class="font-weight-bold">Edogaru</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 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 " 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-8 border-end">
                                <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 class="invalid feedback" role="alert">
                                                    <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 ?? '' }}">
                                                @if ($errors->has('phone'))
                                                <span class="invalid feedback" role="alert">
                                                    <strong>{{ $errors->first('phone') }}.</strong>
                                                </span>
                                                @endif
                                            </div>
                                            <div class="col-md-12 mb-3"><label class="form-label">Bio </label>
                                                <textarea type="text" class="form-control" placeholder="enter bio " name="bio" value="">{{ $user->bio ?? '' }}</textarea>

                                                @if ($errors->has('bio'))
                                                <span class="invalid feedback" role="alert">
                                                    <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="1">Chandigarh</option>
                                                    <option value="2">Mohali</option>
                                                    <option value="3">Other</option>
                                                </select>
                                            </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 class="col-md-4">
                                <div class="p-3">
                                    <h6>Upload Photos</h6>
                                    <div class="upload__box mt-3">
                                        <div class="upload__btn-box">
                                            <label class="upload__btn"> Upload Photos <input type="file" multiple="" data-max_length="20" class="upload__inputfile">
                                            </label>
                                        </div>
                                        <div class="row upload__img-wrap"></div>
                                        <div class="row g-1">
                                            @foreach ($saloon_photos as $saloon_photo)
                                            <div class="col-4">
                                                <div class="bg-light position-relative">
                                                    <div class="upload__img-close" onclick="deleteGallery({{ $saloon_photo->id }})"></div>
                                                    <img src="{{ asset('/Saloon_photos/' . $saloon_photo->image_file) }}" alt="alt" class="w-100 overflow-hidden" height="80px">
                                                </div>
                                            </div>
                                            @endforeach

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

                    </div>
                    <div class="tab-pane fade" id="v-pills-services" role="tabpanel" aria-labelledby="v-pills-services-tab">
                        <div class="row">
                            <div class="col-md-12 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">
                                                    <option value="">-- Select Subcategory --</option>
                                                </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 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" 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;">Edit/Delete</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($userservices as $key => $userservice)
                                                    <tr>
                                                        <td style="width:100px;">{{ $key + 1 }}</td>
                                                        <td style="width:150px;">
                                                            {{ $userservice->services->name }}
                                                        </td>
                                                        <td style="width:150px;">
                                                            {{ $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 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>
                    <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>
                                    <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="">
                                                        <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>
                                    <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">
                                                        <thead>
                                                            <tr>
                                                                <th scope="col">Sr. No.</th>
                                                                <th scope="col">Service</th>
                                                                <th scope="col">Discount</th>
                                                                <th scope="col">Total Price</th>
                                                                <th scope="col">Booking Date</th>
                                                                <th scope="col">Scheduled</th>
                                                                <th scope="col">Username</th>
                                                                <th scope="col">Phone</th>
                                                                <th scope="col">Transaction Id</th>
                                                                <th scope="col">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @if (!empty($bookinglist))
                                                            @foreach ($bookinglist as $key => $bookings)
                                                            <tr>

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

                                                                <td>
                                                                    ₹ {{ $bookings->discount }}
                                                                </td>

                                                                <td>
                                                                    ₹ {{ $bookings->total_price }}
                                                                </td>
                                                                <td>
                                                                    {{ $bookings->created_at }}
                                                                </td>
                                                                <td>
                                                                    {{ $bookings->scheduled_date }}
                                                                </td>
                                                                <td>{{ $bookings->user->name }}</td>
                                                                <td>{{ $bookings->user->phone }}</td>
                                                                <td>
                                                                    {{-- {{ $bookings->salon->name }} ({{ $bookings->saloon_id }}) --}}
                                                                    {{ $bookings->transaction_id }}
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#schedule" data-booking-id="{{ $bookings->id }}" onclick="scheduleBooking('{{ $bookings->id }}')">Schedule</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">3000</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">Service</th>
                                                            <th scope="col">Payment</th>
                                                            <th scope="col">Date/Time</th>
                                                            <th scope="col">Payment Mode</th>
                                                            <th scope="col">Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>--</td>
                                                            <td>--</td>
                                                            <td>--</td>
                                                            <td>--</td>

                                                        </tr>

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </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">
                    </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>
<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>
    // Schedule Booking
    function scheduleBooking(bookingId) {
        // Set the booking ID in the modal
        $('#bookingId').val(bookingId);
        $('#schedule').modal('show');
    }

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

        $.ajax({
            type: 'POST',
            url: 'schedule-booking', // Replace with your actual endpoint
            data: {
                '_token': '{{ csrf_token() }}',
                'schedule_date': selectedDate,
                'booking_id': bookingId
            },
            success: function (data) {  
                alert('Date scheduled successfully!');
                $('#schedule').modal('hide');
                location.reload();
            },
            error: function (error) {
                console.error('Error:', error);
            }
        });
    }
</script>

<!-- <script>
    // Schedule Booking
    function submitScheduleForm() {
        // Get the selected date
        var selectedDate = $('#scheduleDate').val();
        $.ajax({
            type: 'POST',
            url: 'schedule-booking', // Replace with your actual endpoint
            data: {
                '_token': '{{ csrf_token() }}',
                'schedule_date': selectedDate
            },
            success: function (data) {  
                alert('Date scheduled successfully!');
                $('#schedule').modal('hide');
            },
            error: function (error) {
                console.error('Errors:', error);
            }
        });
    }
</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>');
                });

            }
        });
    });

    // 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:100px;">').text(data.id));
        newRow.append($('<td style="width:200px;">').text(data.service));
        newRow.append($('<td style="width:200px;">').text(data.subservice));
        newRow.append($('<td style="width:100px;">').text(data.gender));
        newRow.append($('<td style="width:100px;">').text(data.duration));
        newRow.append($('<td style="width:100px;">').text(data.price));

        var id = data.id;

        function generateDeleteButton(id) {
            return "<a 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>').html(generateDeleteButton(data.id)));
        // You can also add an "Edit/Delete" column if needed, but it's currently empty in your example.

        tableBody.append(newRow);

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

        var url = "{{ url('/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();

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

@endsection