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

@section('content')
    <!-- Define the content section -->
    <div class="container rounded bg-white mt-4 mb-5">
        <div class="row">
            <div class="col-md-3 border-end">
                <div class="d-flex flex-column align-items-center text-center p-3 py-5">
                    <div class="avatar-upload">
                        <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">{{ $user->name }}</span><span
                        class="text-black-50">{{ $user->email }}</span><span> </span>
                </div>
            </div>
            <div class="col-md-5 border-end">
                <div class="p-3 ">
                    <h6>Saloon Details</h6>
                    <form action="{{ route('saloon.update_profile') }}" 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 ?? '' }}">
                            </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 ?? '' }}">
                            </div>
                            <div class="col-md-12 mb-3"><label class="form-label">Bio </label>
                                <textarea type="text" class="form-control" placeholder="enter bio " name="bio" value="">{{ $user->bio ?? '' }}</textarea>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label"> City</label>
                                <select class="form-select" aria-label="Default select example" name="city">
                                    <option selected value="{{ $user->city }}">{{ $user->city }}</option>
                                    <option value="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-5 text-center"><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 Banner Images</h6>
                    <meta name="csrf-token" content="{{ csrf_token() }}">

                    <div class="upload__box mt-3">
                        <div class="upload__btn-box">
                            <label class="upload__btn">

                                Upload Images
                                <input type="file" name="uploadImg" multiple="" data-max_length="20"
                                    class="upload__inputfile">

                            </label>

                        </div>

                        <div class="row upload__img-wrap"></div>
                        <div class="row">
                            @foreach ($saloon_photos as $saloon_photo)
                                <div class="col-3">
                                    <img src="{{ asset('/Saloon_photos/' . $saloon_photo->image_file) }}" alt="alt"
                                        class="img-bg" height="151px">


                                </div>

                        </div>
                        @endforeach


                    </div>
                </div>

            </div>
        </div>
        <div class="row my-4 border-top">
            <div class="col-md-12 mt-4">
                <h6 class="mb-0">Add Services</h6>
            </div>
            <div class="col-md-10">
                <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 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=""><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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></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:161px;">').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>
@endsection