@extends("website.layouts.layout")
@section('title',"Confirm Details")
@section("body")
@include("website.layouts.modal")
<style>
.is-invalid {
    border: 1px solid red;
    /* Example styling for invalid input */
}

.error-message {
    color: red;
    /* Example styling for error message */
    font-size: 12px;
    
}
   .voucher-cards-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .coupon {
        width: 100%;
        height: 150px;
        background: linear-gradient(to bottom, #fff 50%, #d32f2f 50%);
        display: flex;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .coupon:before,
    .coupon:after {
        content: '';
        width: 40px;
        height: 80px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
    }

    .coupon:before {
        left: -20px;
    }

    .coupon:after {
        right: -20px;
    }

    .coupon .left {
        background-color: #acb1b7;
        width: 35%;
        text-align: center;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .coupon .left h2 {
        font-size: 50px;
        margin: 0;
        color: #ffffff;
        font-weight: bold;
    }

    .coupon .left p {
        letter-spacing: 2px;
        color: #000;
        text-transform: uppercase;
        font-size: 14px;
        margin-top: 10px;
    }

    .coupon .right {
        background-color: #4e5cbd;
        width: 65%;
        text-align: center;
        padding: 20px;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .coupon .right h2 {
        font-size: 30px;
        color: #ffffff;
        font-weight: bold;
    }
    .coupon .right p {
        font-size: 14px;
        letter-spacing: 1px;
        color: white;
    }

    .coupon .right .valid {
        font-size: 10px;
        text-transform: uppercase;
    }

    .btn-apply-promo {
        background-color: #fff;
        color: #d32f2f;
        border: 1px solid #fff;
        padding: 5px 15px;
        border-radius: 5px;
        cursor: pointer;
        width: 60%;
    }

    .btn-apply-promo:hover {
        background-color: #d32f2f;
        color: #fff;
    }

</style>
<meta name="csrf-token" content="{{ csrf_token() }}">

<section class="banner-services">
    <img class="banner-background-ellipse" src="{{asset('webAssets/assets/images/banner-bg-img.png')}}" alt="">
</section>

<!-- Breadcrumbs -->
<section class="services-breadcrumb-section">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="/our/servcies">Services</a></li>
                <li class="breadcrumb-item active" aria-current="page">
                                    </li>
                <li class="breadcrumb-item active" aria-current="page">Book Service</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Stepper -->
<section class="stepper">
    <div class="container">
        <div class="row stepper-block text-center justify-content-center">
            <div class="col-lg-3">
                <button type="button" class="btn-circle first-btn completed-state">
                    <span>1</span>
                </button>
                <div class="steps-text">Add Project Location</div>
            </div>
            <div class="col-lg-3">
                <button type="button" class="btn-circle second-btn completed-state">
                    <span>2</span>
                </button>
                <div class="steps-text ">Choose Service <br> Provider & Rates</div>
            </div>
            <div class="col-lg-3">
                <button type="button" class="btn-circle  completed-state ">
                    <span>3</span>
                </button>
                <div class="steps-text">Choose Date & Time</div>
            </div>
            <div class="col-lg-3">
                <button type="button" class="btn-circle last-btn active-state">
                    <span>4</span>
                </button>
                <div class="steps-text active">Confirm Details</div>
            </div>
        </div>
    </div>

</section>


<!-- Confirm Details -->

<section class="confirm-details">
    <div class="container">
        <div class="confirm-details-block">
            <div class="confirm-details-top-item">
                <div class="text-center confirm-details-heading">
                    <h4 class="heading">
                        Confirm Details
                    </h4>
                </div>
            </div>
            <div class="row">
                <div class="confirm-details-item col-lg-6">
                                        <form action="{{route('client.BookServiceP')}}" id="payment-form" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="sp_id" id="sp_id" value="{{$data['sp_id']}}" />
                        <input type="hidden" name="ctg_id" id="ctg_id" value="{{$data['ctg_id']}}" />
                        <input type="hidden" name="sub_ctg_id" id="sub_ctg_id" value="{{$data['sub_ctg_id']}}" />
                        <input type="hidden" name="date" id="date" value="{{$data['slot_date']}}" />
                        <input type="hidden" name="time" id="time" value="{{$data['slot_time']}}" />
                        <input type="hidden" name="slot_time" id="slot_time" value="{{$data['slot_time']}}" />

                        <input type="hidden" name="slot_time" id="latitude" value="{{$data['points']['latitude']}}" />
                        <input type="hidden" name="slot_time" id="longitude" value="{{$data['points']['longitude']}}" />
                        <input type="hidden" name="hourly_rate" id="hourly_rate" value="{{$rate}}" />
                        <input type="hidden" name="sp_stripe_provider_account_id" id="sp_stripe_provider_account_id"
                            value="{{$sp_stripe_provider_account_id}}" />
                        <input type="hidden" name="project_address" id="project_address"
                            value="{{$data['project_address']}}" />
                        <input type="hidden" name="unit_apt" id="unit_apt" value="{{$data['unit_apt']}}" />
                        <input type="hidden" name="state_tax" id="state_tax" value="{{$resp_data['state_tax']}}" />
                        <input type="hidden" name="stripe_client_id" id="stripe_client_id"
                            value="{{$clientData['success']['data']['stripe_client_id']}}" />
                        <input type="hidden" name="promoCode" id="promoCode">
                        <div class="user-profile">
                            <div class="user-basic-details ser-profile">
                                                                <img src="{{ $sp_details['profile_image'] ? asset($sp_details['profile_image']) : asset('nophoto.jpg') }}"
                                            alt="user-profile">

                                <div class="user-profile-inner-details">
                                    <h5 class="user-name">
                                        {{ $sp_details['first_name'] }} {{ substr($sp_details['last_name'], 0, 1) }}
                                    </h5>

                                        <h5 class="paragraph">{{$resp_data['categoryName'] ?? ''}}</h5>
                                
                                        <span class="skill">
                                        <p class="heading-text blue-color">{{$resp_data['subCategoryName'] ?? ''}}</p>
                                        <p class="skill-set">{{ $sp_details['badge']['name'] ?? 'No Badge' }}</p>
                                    </span>

                                    <span class="review"><img src="{{asset('webAssets/assets/images/star.svg')}}"
                                            alt="">
                                        <p> {{ $serviceProviderDetails['star_total'] }} ({{ $serviceProviderDetails['reviews_total'] }}  Reviews)</p>
                                    </span>
                                </div>
                                <!-- <div class="fav-icon">
                                    <span><img src="{{asset('webAssets/assets/images/fav-icon.svg')}}"
                                            alt="fav-icon"></span>
                                </div> -->
                            </div>
                            <div class="users-completed-jobs service-booking-details">
                                <div class="users-job-details">

                                    <div class="users-text-col w-100">
                                        <h6 class="heading">Service Booking Date & Time</h6>
                                        <div class="date-time-user-col d-flex flex-wrap gap-2">
                                            <span class="date clock">
                                                <img src="{{asset('webAssets/assets/images/calender.svg')}}" alt="calendar">
                                                <p class="paragraph" id="date-show">
                                                    {{ \Carbon\Carbon::parse($data['slot_date'])->format('D-M-d-Y') }}
                                                </p>
                                            </span>
                                            <span class="clock">
                                                <img src="{{asset('webAssets/assets/images/clock-noun.svg')}}" alt="clock">
                                                <p class="paragraph" id="date-time-show">
                                                    {{ \Carbon\Carbon::parse($data['slot_time'])->format('h:i A') }}
                                                </p>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class=" users-skills project-location">
                                <div class="users-skill-details">
                                    <div class="users-text-col">
                                        <h6 class="heading">Project Location</h6>
                                        <span class="pro-loc"><img
                                                src="{{asset('webAssets/assets/images/location-icon.svg')}}"
                                                alt="location-icon">
                                            <p class="paragraph">{{$data['project_address']}}</p>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class=" project-description users-skills">
                                <div class="users-skill-details">

                                    <div class="users-text-col">
                                        <h6 class="heading">Project Description</h6>
                                        <div class="form-outline w-100">
                                            <textarea class="form-control w-100" id="textarea-pro-des"
                                                name="description" rows="4" placeholder="Please Share Your Details"
                                                required></textarea>

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

                            <div class="upload-project-file users-skills">
                                <div class="users-skill-details">
                                    <div class="users-text-col">
                                        <h6 class="heading">Upload Project Photos</h6>

                                        <div class="upload-design-input">
                                            <div class="designinput">
                                                <img src="{{asset('webAssets/assets/images/input.svg')}}" alt="input">
                                            </div>
                                            <input class="form-control inputdesigns" type="file" multiple
                                                name="images[]" onchange="showMultipleImages(this)" id="project_images">
                                        </div>
                                        <div id="showImages"></div>
                                    </div>
                                </div>
                            </div>
                            <a href="{{route('choose.serviceProvider.price.get')}}" class="btn btn-primary">Edit
                                Project</a>
                        </div>
                </div>

                <div class="payment-details-item col-lg-6">
                    <div class="payments-items">
                        <h4 class="heading">Payment Details</h4>
                        <span class="payment-tips new-payment-tips"><img
                                src="{{asset('webAssets/assets/images/123.png')}}" alt="tips">
                            <p>Don’t warry, you won’t be billed until your job is completed</p>
                        </span>
                        <div class="payment-gateways-block">
                            <div class="payment-gateway-items">
                                <div class="paymentgateways-heading">
                                    <h3 class="heading">Payment</h3>
                                </div>
                                <!-- Add Payment gateways here -->

                                <div class="accordion payment" id="paymentaccordion">

                                  
                    <div class="payment-block">
                        <!-- ADD PAYMENT GATEWAYS BELOW  -->
                        <div class="provider-payment payment-details-item">
                            <div class="payments-items w-100">
                                <div class="payment-gateways-block">
                                    <div class="payment-gateway-items">
                                        <div class="accordion payment" id="paymentaccordion">
                                            <div class="accordion-item">
                                                <h2 class="accordion-header">
                                                    <button
                                                        class="accordion-button paymemt-btn font-size-18 fw-bold grey-color payment-accordion-btn arrow-visible"
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#paymentAccordionOne"
                                                        aria-expanded="true"
                                                        aria-controls="paymentAccordionOne">
                                                        Show Card
                                                    </button>
                                                </h2>
                                                <div id="paymentAccordionOne"
                                                    class="accordion-collapse collapse show"
                                                    data-bs-parent="#paymentaccordion">
                                                    <div class="accordion-body px-0">
                                                        @if(isset($card_data['success']) &&
                                                        $card_data['success']['status'] == 200)
                                                        @foreach($card_data['success']['data'] as $card)
                                                        <div
                                                            class="payment-body-items d-flex justify-content-between align-items-center mb-2">
                                                            <div
                                                                class="card-select-radio d-flex gap-8px flex-grow-1">
                                                                <input class="payment-option"
                                                                    type="radio" name="client-card"
                                                                    id="{{ $card['card_id'] }}"
                                                                    value="{{ $card['payment_method_id'] }}" />

                                                                <div
                                                                    class="payment-body-action-btn d-flex gap-12px align-items-center justify-content-between w-100">
                                                                    <p class="grey-color">
                                                                        {{ $card['brand'] }}
                                                                        XXXX {{ $card['last4'] }}
                                                                    </p>
                                                                    <div
                                                                        class="card-inner-payment-deatils d-flex gap-12px ">
                                                                        <p class="grey-color">
                                                                            {{ $card['exp_month'] }} /
                                                                            {{ $card['exp_year'] }}
                                                                        </p>
                                                                        <p class="grey-color">CVV</p>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        @endforeach
                                                        @else
                                                        <p>{{@$card_data['message']}}</p>
                                                        @endif

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <div class="payment-action-btn">
                                    <button type="button"
                                        class="btn border-0 blue-color text-decoration-underline p-0"
                                        data-bs-toggle="modal" data-bs-target="#paymentCard">
                                        Add New Card
                                    </button>
                                </div>
                            </div>
                        </div>

                                </div>
                            </div>
                          

                        @if(!$serviceProviderDetailsFromAPI['hasreferralcode']='true')
                            <div class="promos">
                                <h6 class="heading">Promos</h6>
                                <button type="button" id="promocodeBtn" class="btn border-0 blue-color text-decoration-underline p-0"
                                    data-bs-toggle="modal" data-bs-target="#promoCodeModal">Apply Promos</button>
                            </div>
                        @endif

                            <div class="price-details">
                                <h6 class="heading">Price Details</h6>


                                <div class="rates">
                                    <h4 class="heading"># Service</h4>
                                    <h4 class="heading">Cost</h4>

                                </div>
                                <div class="rates">
                                    <p>Hourly Rate</p>
                                    <p>$/hr</p>
                                </div>
                                <div class="rates">
                                    <p>Platform Fee</p>
                                    <p>$/hr</p>
                                    <input type="hidden" name="platform_fee" id="platform_fee"
                                        value="">
                                </div>
                                <div class="rates">
                                    <p>Taxes</p>
                                    <p>$/hr</p>
                                    <input type="hidden" name="taxes" id="taxes" value="">
                                </div>
                                <hr style="margin-top: 0px;">
                                <div class="rates">
                                    <h6>Total</h6>
                                    <h6>$/hr</h6>
                                    <input type="hidden" name="total_amount" id="total_amount"
                                        value="">
                                </div>
                            </div>

                            <div class="payment-cancel-details">
                                <span>
                                    <img src="{{ asset('webAssets/assets/images/123.png') }}" alt="tick">
                                    <p>Your payment method may reflect a temporary hold of ${{ $resp_data['grandTotal'] ?? '' }}/hr
                                        , however you retain the flexibility to cancel at anytime. Please be aware that
                                        <a href="{{ route('page.cancellation-policy') }}" target="_blank"
                                            style="text-decoration: underline;text-underline-offset:4px">cancellations</a>
                                       made within 24 hours of the scheduled start may result in a one-hour cancellation fee, as
                                       all jobs requires a minimum one-hour charge.
                                    </p>
                                </span>

                            </div>
                        </div>
                        <div class="payment-action-btn">
                            <button type="button" class="w-100 btn btn-primary" id="button-add-tasks">Confirm</button>
                        </div>
                    </div>

                </div>
            </div>
            </form>
        </div>
    </div>
    </div>
            <div class="modal fade" id="paymentCard" tabindex="-1" aria-labelledby="paymentCardLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content gap-8px">
                        <div class="modal-header">
                            <h2 class="modal-title fs-5" id="paymentCardLabel">Add New Card</h2>
                            <button type="button" class="btn-close" id="addcard_btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="profile-info d-flex flex-column">
                                <div class="edit-profile-form">
                                    <form class="d-flex flex-column forms" id="add-payment-form">
                                        @csrf
                                        <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">Card Holder Name</h3>
                                            <input type="text" name="cardHolderName" id="cardHolderName" placeholder="Card Holder Name">
                                            <span class="error-message"></span>
                                        </div>

                                        <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">Card Details</h3>
                                            <div id="card-element" class="stripe-input"></div> <!-- Stripe Elements will mount here -->
                                            <span class="error-message" id="card-errors"></span>
                                        </div>

                                        <!-- <div class="edit-form-field d-flex flex-column">
                                            <h3 class="font-size-14">Zip/ Postal Code</h3>
                                            <input type="text" name="postalCode" placeholder="12365" id="postalCode">
                                            <span class="error-message"></span>
                                        </div> -->

                                        <div class="form-check d-flex align-items-center gap-8px m-0">
                                            <input class="form-check-input" type="checkbox" value="1" id="is_card_save_permanent" name="is_card_save_permanent">
                                            <label class="form-check-label grey-color" for="is_card_save_permanent">
                                                Save this card for faster payments
                                            </label>
                                            <input type="hidden" name="isCardSavePermanent" value="0">
                                        </div>

                                        <div class="edit-form-field d-flex flex-column">
                                            <button type="submit" class="btn btn-primary w-100" id="button-submit">Save Card</button>
                                        </div>
                                    </form>

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

            <div class="modal fade" id="promoCodeModal" tabindex="-1" aria-labelledby="promoCodeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="promoCodeModalLabel">Available Promo Codes</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="voucher-cards-container">
                    @if(count($promocode) == 0)
                    <div class="voucher-card">
                        <div class="coupon">
                            <div class="left">
                                <h2>$0</h2>
                                <p>No Promo Code Available</p>
                            </div>
                            <div class="right">
                                <h2>No Promo Code Available</h2>
                            </div>
                        </div>
                    </div>
                    @endif
                    @foreach($promocode as $promo) 
                    <div class="voucher-card">
                        <div class="coupon">
                            <div class="left">
                                <h2>${{ $promo->discount }}</h2>
                                <p>{{ $promo->title }}</p>
                            </div>
                            <div class="right">
                                <h2>{{ $promo->code }}</h2>
                                <p>{!! $promo->description !!}</p>
                                <p class="valid">Expires on: {{ \Carbon\Carbon::parse($promo->expiry_date)->format('F d, Y') }}</p>
                                <button class="btn btn-secondary btn-sm" type="button" onclick="applyPromo('{{ $promo->code }}')">Apply Promo</button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>


                <div class="modal fade" id="confirm-job-modal" tabindex="-1" aria-labelledby="confirm-job-modalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered delete-account">
                        <div class="delete-account-modal-content">
                            <div class="delete-account-modal-header">
                                <div class="alert-icon">
                                    <img src="{{ asset('webAssets/assets/images/tick-mark_blue.svg')}}" alt="alert">
                                </div>

                                <a class="btn-close" href="{{route('client.myAccount')}}"></a>
                            </div>
                            <div class="delete-account-modal-body">
                                <div class="alert-box d-flex align-items-center flex-column">
                                    <h3 class="heading text-center">You have successfully booked {{ $sp_details['first_name'] }}
                                        {{ substr($sp_details['last_name'], 0, 1) }}</h3>
                                </div>

                                <p class="text-center mt-3"> Service Provider usually contact you to chat about your project in less than 1 hour
                                </p>
                            </div>
                            <div class="delete-action-btn d-flex align-items-center">
                                <a href="{{route('client.myAccount')}}" class="btn btn-primary w-100">Sounds Good</a>
                            </div>
                        </div>
                    </div>
                </div>
</section>

@endsection

@section('footerItems')
<script src="https://js.stripe.com/v3/"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const stripe = Stripe("pk_test_51PEjhA02tfOiv2fbTPmoJp1EZxawEofZLNxwtOr2dCIKkYTavqTLoMnNEK6n1G7jpmIo5qeVsYSrbV2AjVT6lQMx00C6a3vwUj"); // Replace with your actual Stripe Publishable Key
    const elements = stripe.elements();

    // Create a Card Element and mount it into the form
    const cardElement = elements.create("card", { style: { base: { fontSize: "16px" } } });
    cardElement.mount("#card-element");

    const form = document.getElementById("add-payment-form");
    const submitButton = document.getElementById("button-submit");
    const cardErrorMessage = document.getElementById("card-errors");

    cardElement.on("change", function (event) {
        if (event.error) {
            cardErrorMessage.textContent = event.error.message; // Show error if card details are invalid
        } else {
            cardErrorMessage.textContent = ""; // Clear error message if valid
        }
    });

    form.addEventListener("submit", async function (event) {
        event.preventDefault();
        submitButton.disabled = true;

        const cardHolderName = document.getElementById("cardHolderName").value;
        // const postalCode = document.getElementById("postalCode").value;
        const isCardSavePermanent = document.getElementById("is_card_save_permanent").checked ? 1 : 0;

        if (!cardHolderName) {
            document.getElementById("card-errors").textContent = "All fields are required!";
            submitButton.disabled = false;
            return;
        }
        console.log(cardElement);
        // **Check if card details are filled**
        const { token, error } = await stripe.createToken(cardElement);

        if (error) {
            console.error("Stripe Token Error:", error.message);
            cardErrorMessage.textContent = error.message; // Show error on UI
            submitButton.disabled = false;
            return;
        }
        console.log("Generated Stripe Token:", token);
        const postalCode = token.card.address_zip || "";

        var formData = new FormData();
        formData.append("cardHolderName", cardHolderName);
        formData.append("stripe_token", token.id);
        formData.append("postalCode", postalCode); 
        formData.append("isCardSavePermanent", isCardSavePermanent);
        $.ajax({
            url: "{{ route('client.addPayment.card') }}",
            method: "POST",
            data: formData,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.success) {
                    $("#addcard_btn-close").click();
                    toastr.success(response.success.message);
                    setTimeout(() => location.reload(), 1000);
                } else {
                    toastr.error(response.error ? response.error.message : "An error occurred.");
                }
                $("#button-submit").prop("disabled", false);
            },
            error: function () {
                toastr.error("Please fill valid card details!");
                $("#button-submit").prop("disabled", false);
            },
        });
    });
});

function showMultipleImages(images) {
    let myImages = Array.from(images.files);

    document.getElementById("showImages").innerHTML = '';
    myImages.forEach(element => {
        let img = document.createElement("img");
        img.src = URL.createObjectURL(element);
        img.style = "height:100px; width:100px;";

        document.getElementById("showImages").appendChild(img);
    });
}
</script>
<script>
// Pass PHP variables into JavaScript
var slotDate = "{{ \Carbon\Carbon::parse($data['slot_date'])->format('Y-m-d') }}";
var slotTime = "{{ $data['slot_time'] }}";

// Display the time using moment.js
var formattedTime = moment(slotTime).format('LT');
// Optionally update the displayed time dynamically
document.getElementById('date-time-show').innerText = formattedTime;

// Example of updating the date (if needed)
document.getElementById('date-show').innerText = moment(slotDate).format('ddd-MMM-DD-YYYY');
</script>

<script>
   function applyPromo(promoCode) {
    $('#promoCodeModal').modal('hide'); // Close the modal    
    $('#promocodeBtn').text(promoCode);
    $('#promoCode').val(promoCode);
}

$(document).ready(function() {

    var cardModal = document.getElementById('paymentCard');
    paymentCard.addEventListener('hidden.bs.modal', function() {
        clearInputs(paymentCard);
    });

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#button-submit---').on('click', function(event) {
        event.preventDefault();


        var isValid = true; // Assume the form is valid initially

        // Card Holder Name validation
        var cardHolderName = $('#cardHolderName').val().trim();
        if (!cardHolderName) {
            $('#cardHolderName').next('.error-message').text('Card holder name is required!');
            $('#cardHolderName').addClass('is-invalid');
            isValid = false;
        } else {
            $('#cardHolderName').next('.error-message').text('');
            $('#cardHolderName').removeClass('is-invalid');
        }

        // Card Number validation
        var cardNumber = $('#cardNumber').val().replace(/\D/g, '').trim();
        if (!cardNumber) {
            $('#cardNumber').next('.error-message').text('Card number is required!');
            $('#cardNumber').addClass('is-invalid');
            isValid = false;
        } else if (cardNumber.length !== 16) {
            $('#cardNumber').next('.error-message').text('Card number must be exactly 16 digits!');
            $('#cardNumber').addClass('is-invalid');
            isValid = false;
        } else {
            $('#cardNumber').next('.error-message').text('');
            $('#cardNumber').removeClass('is-invalid');
        }

        // Expiry validation
        var expiry = $('#expiry').val().replace(/\D/g, '').trim();
        if (!expiry) {
            $('#expiry').next('.error-message').text('Expiry date is required!');
            $('#expiry').addClass('is-invalid');
            isValid = false;
        } else if (expiry.length !== 4) {
            $('#expiry').next('.error-message').text('Invalid expiry date! Use MM/YY format.');
            $('#expiry').addClass('is-invalid');
            isValid = false;
        } else {
            $('#expiry').next('.error-message').text('');
            $('#expiry').removeClass('is-invalid');
        }

        // CVV validation
        var cvv = $('#cvv').val().replace(/\D/g, '').trim();
        if (!cvv) {
            $('#cvv').next('.error-message').text('CVV is required!');
            $('#cvv').addClass('is-invalid');
            isValid = false;
        } else if (cvv.length !== 3 && cvv.length !== 4) {
            $('#cvv').next('.error-message').text('CVV must be 3 or 4 digits!');
            $('#cvv').addClass('is-invalid');
            isValid = false;
        } else {
            $('#cvv').next('.error-message').text('');
            $('#cvv').removeClass('is-invalid');
        }

        // Postal Code validation
        var postalCode = $('#postalCode').val().replace(/\D/g, '').trim();
        if (!postalCode) {
            $('#postalCode').next('.error-message').text('Postal code is required!');
            $('#postalCode').addClass('is-invalid');
            isValid = false;
        } else if (postalCode.length !== 5) {
            $('#postalCode').next('.error-message').text('Postal code must be exactly 5 digits!');
            $('#postalCode').addClass('is-invalid');
            isValid = false;
        } else {
            $('#postalCode').next('.error-message').text('');
            $('#postalCode').removeClass('is-invalid');
        }
        var cardHolderName = $('#cardHolderName').val();
        var cardNumber = $('#cardNumber').val();
        var expiry = $('#expiry').val();
        var cvv = $('#cvv').val();
        var postalCode = $('#postalCode').val();
        var is_card_save_permanent = $('#is_card_save_permanent').val();
        var formData = new FormData();
        formData.append('cardHolderName', cardHolderName);
        formData.append('cardNumber', cardNumber);
        formData.append('expiry', expiry);
        formData.append('cvv', cvv);
        formData.append('postalCode', postalCode);
        formData.append('isCardSavePermanent', is_card_save_permanent);
        if (isValid) {
            $.ajax({
                url: "{{ route('client.addPayment.card') }}",
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                success: function(response) {
                    // console.log(response);
                    if (response.success) {
                        // if (response.success.status == 200) {
                        // $("#paymentCard").hide();
                        $("#addcard_btn-close").click();
                        toastr.success(response.success.message);
                        setTimeout(() => {
                            location.reload();
                        }, 1000);
                    } else if (response.status == 401) {
                        toastr.error(response.message);
                    } else if (response.status == 404) {
                        toastr.error(response.error);
                    } else if (response.error) {
                        toastr.error(response.error.message);
                    } else {
                        toastr.error(response);
                    }
                },
                error: function(xhr, status, error) {
                    // console.log(error, status);
                    toastr.error("Please fill valid card details!");
                }
            });
        }
    });

    // Zip/Postal Code validation on input
    $('#cardHolderName').on('input', function() {
        var cardHolderName = $(this).val().trim();
        var errorMessage = '';

        // Validate the length and content of cardHolderName
        if (!cardHolderName) {
            errorMessage = 'Card holder name is required!';
        }

        // Display error message if validation fails
        $(this).toggleClass('is-invalid', errorMessage !== '');
        $(this).next('.error-message').text(errorMessage);
    });

    // Clear error message when user starts typing again
    $('#postalCode').on('keydown', function() {
        $(this).removeClass('is-invalid');
        $(this).next('.error-message').text('');
    });

    // Card Number validation on input
    $('#cardNumber').on('input', function() {
        var cardNumber = $(this).val().trim();
        var errorMessage = '';

        // Remove any non-digit characters (e.g., spaces, dashes)
        cardNumber = cardNumber.replace(/\D/g, '');

        // Limit to 16 digits
        if (cardNumber.length > 16) {
            cardNumber = cardNumber.slice(0, 16);
        }

        // Format the card number for display (if needed)
        var formattedCardNumber = formatCardNumber(cardNumber);
        $(this).val(formattedCardNumber);

        // Validate the length and content of the card number
        if (cardNumber.length !== 16) {
            errorMessage = 'Card number must be exactly 16 digits';
        } else if (!/^\d+$/.test(cardNumber)) {
            errorMessage = 'Card number must contain only digits';
        }

        // Display error message if validation fails
        $(this).toggleClass('is-invalid', errorMessage !== '');
        $(this).next('.error-message').text(errorMessage);
    });

    // Function to format card number with spaces for readability
    function formatCardNumber(cardNumber) {
        var formatted = '';
        for (var i = 0; i < cardNumber.length; i++) {
            if (i > 0 && i % 4 === 0) {
                formatted += ' '; // Insert space after every 4th digit
            }
            formatted += cardNumber[i];
        }
        return formatted;
    }

    // Clear error message when user starts typing again
    $('#cardNumber').on('keydown', function() {
        $(this).removeClass('is-invalid');
        $(this).next('.error-message').text('');
    });

    // Expiry (MM/YY) validation on input
    $('#expiry').on('input', function() {
        var expiry = $(this).val().trim();
        var errorMessage = '';

        // Remove any non-digit characters (e.g., spaces, dashes)
        expiry = expiry.replace(/\D/g, '');

        // Limit to MMYY format (4 digits)
        if (expiry.length > 4) {
            expiry = expiry.slice(0, 4);
        }

        // Format the expiry for display as MM/YY
        var formattedExpiry = formatExpiry(expiry);
        $(this).val(formattedExpiry);

        // Validate the length and format only if input has 4 digits (MMYY)
        if (expiry.length === 4) {
            var month = parseInt(expiry.slice(0, 2), 10);
            var year = parseInt(expiry.slice(2, 4), 10);

            // Check if the month is valid (01-12) and year is reasonable (e.g., not far in the past)
            if (month < 1 || month > 12 || year < 0 || year > 99) {
                errorMessage = 'Invalid expiry date. Please use MM/YY format.';
            }
        } else if (expiry.length > 0) {
            // If input is not complete, indicate format expectation
            errorMessage = 'Expiry must be in MM/YY format';
        }

        // Display error message if validation fails
        $(this).toggleClass('is-invalid', errorMessage !== '');
        $(this).next('.error-message').text(errorMessage);
    });

    // Function to format MMYY as MM/YY for display
    function formatExpiry(expiry) {
        if (expiry.length > 2) {
            return expiry.slice(0, 2) + '/' + expiry.slice(2);
        }
        return expiry;
    }

    // Clear error message when user starts typing again
    $('#expiry').on('keydown', function() {
        $(this).removeClass('is-invalid');
        $(this).next('.error-message').text('');
    });

    // Zip/Postal Code validation on input
    $('#postalCode').on('input', function() {
        var postalCode = $(this).val().trim();
        var errorMessage = '';

        // Remove any non-digit characters (e.g., spaces)
        postalCode = postalCode.replace(/\D/g, '');

        // Limit to 5 digits
        if (postalCode.length > 5) {
            postalCode = postalCode.slice(0, 5);
        }

        // Validate the length and content of postalCode
        if (postalCode.length !== 5) {
            errorMessage = 'Postal code must be exactly 5 digits';
        } else if (!/^\d+$/.test(postalCode)) {
            errorMessage = 'Postal code must contain only digits';
        }

        // Update the input field value with formatted postalCode
        $(this).val(postalCode);

        // Display error message if validation fails
        $(this).toggleClass('is-invalid', errorMessage !== '');
        $(this).next('.error-message').text(errorMessage);
    });

    // Clear error message when user starts typing again
    $('#postalCode').on('keydown', function() {
        $(this).removeClass('is-invalid');
        $(this).next('.error-message').text('');
    });

    // CVV validation on input
    $('#cvv').on('input', function() {
        var cvv = $(this).val().trim();
        var errorMessage = '';

        // Remove any non-digit characters (e.g., spaces)
        cvv = cvv.replace(/\D/g, '');

        // Limit to 3 digits
        if (cvv.length > 4) {
            cvv = cvv.slice(0, 4);
        }

        // Validate the length and content of CVV
        if (cvv.length !== 3 && cvv.length !== 4) {
            errorMessage = 'CVV must be 3 or 4 digits';
        }

        // Display error message if validation fails
        $(this).val(cvv); // Update input field with validated CVV
        $(this).toggleClass('is-invalid', errorMessage !== '');
        $(this).next('.error-message').text(errorMessage);
    });

    // Clear error message when user starts typing again
    $('#cvv').on('keydown', function() {
        $(this).removeClass('is-invalid');
        $(this).next('.error-message').text('');
    });
});

$('#button-add-tasks').on('click', function(event) {
    event.preventDefault();

    if ($('#textarea-pro-des').val() == '') {
        toastr.error("Please write Project Description!");
        return false;
    }

    var selected_card = $("input[name='client-card']:checked").val();
    if (selected_card == null || selected_card == '') {
        toastr.error("Please select a Card");
        return false;
    }

    var formData = new FormData();
    var files = $('#project_images')[0].files;

    // Append each image file individually
    for (var i = 0; i < files.length; i++) {
        formData.append('images[]', files[i]);
    }

    formData.append('description', $('#textarea-pro-des').val());
    formData.append('sp_id', $('#sp_id').val());
    formData.append('ctg_id', $('#ctg_id').val());
    formData.append('sub_ctg_id', $('#sub_ctg_id').val());
    formData.append('promo_code', $('#promoCode').val());

//     var dateValue = $('#date').val();
//     var dateObject = new Date(dateValue);
//     var month = (dateObject.getMonth() + 1).toString().padStart(2, '0');
//     var day = dateObject.getDate().toString().padStart(2, '0');
//     var year = dateObject.getFullYear();
//     var formattedDate = month + '-' + day + '-' + year;
//     formData.append('date', formattedDate);



        var dateValue = $('#date').val(); // Assuming value is "2025-12-27"
        var parts = dateValue.split('-'); // Split the string by '-'
        var formattedDate = parts[1] + '-' + parts[2] + '-' + parts[0]; // Rearrange as MM-DD-YYYY
        formData.append('date', formattedDate);

        // var dateString = $('#time').val();
        // var dateObject = new Date(dateString);
        // dateObject.setHours(dateObject.getUTCHours() - 5);
        // var hours = dateObject.getHours();
        // var minutes = dateObject.getMinutes();
        // var formattedHours = hours < 10 ? '0' + hours : hours;
        // var formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
        // var formattedTime = formattedHours + ':' + formattedMinutes;


   
        var dateString = $('#time').val();  // Get the input value
        console.log("Original Time (UTC):", dateString);

        var dateObject = new Date(dateString);  // Create a Date object from the string

        // Get user's timezone offset in minutes
        // var userTimeZoneOffsetMinutes = dateObject.getTimezoneOffset();
        // console.log("OriginalTimezone", userTimeZoneOffsetMinutes,dateObject.getMinutes());

        // // Convert UTC time to local time by subtracting the offset (in minutes)
        // dateObject.setMinutes(dateObject.getMinutes() - userTimeZoneOffsetMinutes);
        if (isNaN(dateObject.getTime())) {
            console.error("Invalid date format! Check your input.");
        } else {
                var hours = dateObject.getHours();
                var minutes = dateObject.getMinutes();
                var seconds = dateObject.getSeconds();  // Get the seconds part

                console.log(`Updated Time (Local): ${hours}:${minutes}:${seconds}`);

                // Ensure hours, minutes, and seconds are always two digits
                var formattedHours = hours < 10 ? '0' + hours : hours;
                var formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
                var formattedSeconds = seconds < 10 ? '0' + seconds : seconds;  

                var formattedTime = formattedHours + ':' + formattedMinutes + ':' + formattedSeconds;  // Concatenate time

                console.log(formattedTime,"formattedTime")
        }
        formData.append('time', formattedTime);
        formData.append('latitude', $('#latitude').val());
        formData.append('longitude', $('#longitude').val());
        formData.append('slot_time', $('#slot_time').val());
        formData.append('hourly_rate', $('#hourly_rate').val());
        formData.append('platform_fee', $('#platform_fee').val());
        formData.append('taxes', $('#taxes').val());
        formData.append('project_address', $('#project_address').val());
        formData.append('apt_unit', $('#unit_apt').val());
        formData.append('state_tax', $('#state_tax').val());


    //     console.log(Object.fromEntries(formData.entries()));
    //    return false;
    $.ajax({
        url: "{{ route('client.createTask') }}",
        method: 'POST',
        data: formData,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        processData: false,
        contentType: false,
        success: function(response) {
            // console.log(response);

            if (response.success && response.success.status == 200) {
                // console.log('doneeee');
                toastr.success(response.success.message);
                createPaymentIntent(response.success);
            } else if (response.error) {
                toastr.error(response.error.message || 'An error occurred');
            } else {
                toastr.error('An unexpected error occurred');
            }
        },
        error: function(xhr, status, error) {
            // console.log(error);
            toastr.error('An unexpected error occurred: ' + error);
        }
    });
});

function createPaymentIntent(data) {
    var selected_card = $("input[name='client-card']:checked").val();
    var stripe_client_id = $('#stripe_client_id').val();
    var client_task_id = data.data.task_id;
    var payment_method_id = selected_card;
    var amount = $('#total_amount').val();
    var stripe_provider_account_id = $('#sp_stripe_provider_account_id').val();

    var formData = new FormData();
    formData.append('stripe_client_id', stripe_client_id);
    formData.append('client_task_id', client_task_id);
    formData.append('payment_method_id', payment_method_id);
    formData.append('amount', amount);
    formData.append('stripe_provider_account_id', stripe_provider_account_id);
    // console.log('createPaymentIntent', formData);

    $.ajax({
        url: "{{ route('client.createPaymentIntent') }}",
        method: 'POST',
        data: formData,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        processData: false,
        contentType: false,
        success: function(response) {
            // console.log('createPaymentIntent postt', response);

            if (response.success.status == 200) {
                $("#confirm-job-modal").modal("show");
                toastr.success(response.success.message);
            } else if (response.status == 401) {
                toastr.error(response.message);
            } else if (response.status == 404) {
                toastr.error(response.error);
            } else if (response.error) {
                toastr.error(response.error.message);
            } else {
                toastr.error(response);
            }
        },
        error: function(xhr, status, error) {
            toastr.error('Please try again!');
        }
    });
}

$(document).ready(function() {
    // Store the original total value on page load
    var originalTotal = parseFloat($('#total_amount').val());

  

    // Function to update the total after applying the discount
    function updateTotal(discount) {
        // Safeguard to ensure discount is a valid number
        if (isNaN(discount) || discount <= 0) {
            revertToOriginalTotal(); // If invalid discount, revert
            return;
        }

        var newTotal = originalTotal - discount; // Calculate new total
        
        // Ensure that newTotal is not negative
        if (newTotal < 0) {
            newTotal = 0;
        }

        // Update the hidden input and displayed total
        $('#total_amount').val(newTotal); // Update the hidden input
        $('.price-details .rates h6').last().text('$' + newTotal.toFixed(2) + '/hr'); // Update the displayed total
    }

    // Function to revert the total back to the original value
    function revertToOriginalTotal() {
        $('#total_amount').val(originalTotal); // Reset the hidden input to original total
        $('.price-details .rates h6').last().text('$' + originalTotal.toFixed(2) + '/hr'); // Reset the displayed total
    }
});

</script>

@endsection