@extends('user.layouts.main')

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="card border-0">
            <div class="card-header bg-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title my-2"> Service Provider </h5>
                    <a href="{{route('user.service')}}" class="btn btn-sm btn-primary border-0"> Back </a>
                </div>
            </div>
            <div class="card-body">
                <div class="service_provider">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex flex-column align-items-center text-center">
                                        <img src="{{ asset('assets/images/default-user.png') }}" alt="Service Provider" class="rounded-circle p-1 bg-pm" width="110">
                                        <div class="mt-3">
                                            <h4> Adhiambo </h4>
                                            <p class="text-secondary mb-1"> +254 20 4242000 </p>
                                            <p class="text-muted font-size-sm"> Nairobi, Kenya </p>
                                        </div>
                                    </div>
                                    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                        <button class="nav-link active" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"> Profile </button>
                                        <button class="nav-link" 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"> Services </button>
                                        <button class="nav-link" id="v-pills-provider-review-tab" data-bs-toggle="pill" data-bs-target="#v-pills-provider-review" type="button" role="tab" aria-controls="v-pills-provider-review" aria-selected="false"> Review </button>
                                        <a href="http://127.0.0.1:8000/user/chat" target="_blank" class="nav-link w-100 text-center"> Messages </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="card tab-pane fade show active" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">
                                    <div class="card-body position-relative">
                                        <div class="top-status">
                                            <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3">
                                                <h5 class="m-0"> My Profile </h5>
                                                <button type="button" class="btn btn-sm btn-primary border-0 edit-btn" id="SPEditBtn" onclick="SPEditInfo()">
                                                    <i class="fa-solid fa-user-pen"></i>
                                                </button>
                                            </div>
                                            <div class="card-body p-0">
                                                <form id="infoForm">
                                                    <div class="info-section">
                                                        <div class="row">
                                                            <div class="col-12 info-input mb-3" id="SPNameInput" style="display: none;">
                                                                <input type="text" id="SPName" class="form-control" value="Adhiambo">
                                                            </div>

                                                            <div class="col-12 info-input mb-3" id="SPEmailInput" style="display: none;">
                                                                <input type="email" id="SPEmail" class="form-control" value="salman.ahmed@gmail.com">
                                                            </div>

                                                            <div class="col-12 info-input mb-3" id="SPNumberInput" style="display: none;">
                                                                <input type="text" id="SPNumber" class="form-control" value="+254 20 4242000">
                                                            </div>

                                                            <div class="col-12 info-input mb-3" id="SPLocationInput" style="display: none;">
                                                                <input type="text" id="SPLocation" class="form-control" value="Westlands, Nairobi">
                                                            </div>

                                                            <!-- Password -->
                                                            <div class="col-6 info-input mb-3 position-relative" id="passwordInput" style="display: none;">
                                                                <p class="mb-1"> Change password </p>

                                                                <input type="password" id="password" class="form-control" placeholder="New Password" />
                                                                <button type="button" class="toggle-password-btn" data-target="password" onclick="togglePassword(this)">
                                                                    <i class="fa fa-eye"></i>
                                                                </button>
                                                            </div>

                                                            {{-- Confirm Password --}}
                                                            <div class="col-6 info-input mb-3 position-relative" id="SPConfirmPasswordInput" style="display: none;">
                                                                <p class="mb-1 position-relative" style="z-index: -1"> - </p>
                                                                <input type="password" id="SPConfirmPassword" class="form-control" placeholder="Confirm Password" />
                                                                <button type="button" class="toggle-password-btn" data-target="SPConfirmPassword" onclick="togglePassword(this)">
                                                                    <i class="fa fa-eye"></i>
                                                                </button>
                                                            </div>

                                                            <div class="col-12 info-img mb-3">
                                                                <input type="file" id="SVImageInput" class="form-control" style="display: none;" accept="image/*" onchange="SPPreviewImage(event)">
                                                            </div>
                                                        </div>

                                                        <div class="media">
                                                            <div class="info-img align-self-center mr-3">
                                                                <img src="{{ asset('assets/images/default-user.png') }}" alt="Profile Image" id="SVProfileImage" width="100">
                                                            </div>
                                                            <div class="media-body">
                                                                <div class="mb-2">
                                                                    <div class="info-text" id="SPNameText"> <span> Name: </span> Adhiambo </div>
                                                                </div>

                                                                <div class="mb-2">
                                                                    <div class="info-text" id="SPEmailText"> <span> Email: </span> salman.ahmed@gmail.com </div>
                                                                </div>

                                                                <div class="mb-2">
                                                                    <div class="info-text" id="SPNumberText"> <span> Number: </span> +254 20 4242000 </div>
                                                                </div>

                                                                <div class="mb-2">
                                                                    <div class="info-text" id="SPLocationText"> <span> Location: </span> Westlands, Nairobi </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        {{-- Update Btn --}}
                                                        <div class="text-center">
                                                            <button type="button" class="btn btn-sm btn-primary border-0 col-6 update-btn" id="SPUpdateBtn" style="display: none;" onclick="SPUpdateInfo()"> Update Info </button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card tab-pane fade" id="v-pills-services" role="tabpanel" aria-labelledby="v-pills-services-tab" tabindex="0">
                                    <div class="card-body">
                                        <div class="top-status sp-category">
                                            <h5 class="border-bottom pb-3 mb-3"> Our Services Category </h5>
                                            <div class="card-columns">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> Home Cleaning </h5>
                                                        <div class="card-text">
                                                            <span> Complete house </span>
                                                            <span> Kitchen </span>
                                                            <span> Bathroom </span>
                                                            <span> Window and door </span>
                                                            <span> Daily maintenance </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> Office Cleaning </h5>
                                                        <div class="card-text">
                                                            <span> Workstation </span>
                                                            <span> Meeting room </span>
                                                            <span> Glass window </span>
                                                            <span> Floor polishing </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> End-of-Lease Cleaning </h5>
                                                        <div class="card-text">
                                                            <span> Clean the entire house before moving out </span>
                                                            <span> Remove stains from walls and floors </span>
                                                            <span> Carpet and sofa cleaning </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> Deep Cleaning </h5>
                                                        <div class="card-text">
                                                            <span> Clean the corners of the house </span>
                                                            <span> Clean under and behind furniture </span>
                                                            <span> Mold or bacteria removal </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> Carpet and Upholstery Cleaning </h5>
                                                        <div class="card-text">
                                                            <span> Carpet shampoo cleaning </span>
                                                            <span> Sofa or chair cleaning </span>
                                                            <span> Stain removal </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> Post-Construction Cleaning </h5>
                                                        <div class="card-text">
                                                            <span> Remove post-construction dust </span>
                                                            <span> Clean glass windows and floor polish </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> Commercial Space Cleaning </h5>
                                                        <div class="card-text">
                                                            <span> Shop or showroom cleaning </span>
                                                            <span> Large industrial cleaning </span>
                                                            <span> Store room or warehouse cleaning </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> Cleaning with Pest Control </h5>
                                                        <div class="card-text">
                                                            <span> Pest control and cleaning </span>
                                                            <span> Residential and commercial pest control </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> On-Demand Cleaning </h5>
                                                        <div class="card-text">
                                                            <span> Cleaning after events </span>
                                                            <span> Quick cleaning after parties or meetings </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title fs-6 fw-bold"> Green Cleaning (Eco-Friendly) </h5>
                                                        <div class="card-text">
                                                            <span> Use of environmentally friendly cleaning </span>
                                                            <span> Cleaning with biodegradable products </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card tab-pane fade" id="v-pills-provider-review" role="tabpanel" aria-labelledby="v-pills-provider-review-tab" tabindex="0">
                                    <div class="card-body">
                                        <h4> Reviews </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Review Modal --}}
    <div id="serviceReviewModal" class="service-review-modal">
        <div class="service-review-modal-content">
            <span class="service-review-close-btn">&times;</span>
            <h2>Custom Modal Title</h2>
            <p>This is a custom modal created using HTML, CSS, and JavaScript.</p>
            <button id="serviceReviewCloseModalBtn">Close</button>
        </div>
    </div>
@endsection