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

.error-message {
    color: red;
    /* Example styling for error message */
    font-size: 12px;
}
.blurred {
    opacity: 0.5; /* Make the button look lighter */
    pointer-events: none; /* Disable interactions */
}

</style>
<!-- Banner -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<!-- Breadcrumb Section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('homepage') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                <li class="breadcrumb-item active" aria-current="page">Payment</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Main Content -->
<section class="dashboard-main">
    <div class="container">
        <div class="row sidebar_row">
            @include("website.clients.includes.sidebar")
            <div class="main-content">
                <div class="main-content-wrapper my-profile">
                    <div class="payment-block">
                        <h3 class="font-size-24 py-3">Payment</h3>
                        <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">

                                            </div>

                                            <div class="accordion-item">
                                                <h2 class="accordion-header">
                                                    <button
                                                        class="accordion-button paymemt-btn font-size-18 fw-bold grey-color payment-accordion-btn"
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#paymentAccordionTwo" aria-expanded="true"
                                                        aria-controls="paymentAccordionTwo">
                                                        Cards
                                                    </button>
                                                </h2>
                                                <div id="paymentAccordionTwo" class="accordion-collapse collapse show" data-bs-parent="#paymentaccordion">
                                                    @if(!empty($paymentMethods))
                                                        @foreach($paymentMethods as $index => $paymentMethod)
                                                            @php
                                                                // Check if there's a pending payment intent for this payment method
                                                                $hasPendingPayment = $paymentIntent->contains(function($intent) use ($paymentMethod) {
                                                                    return $intent->payment_method_id === $paymentMethod['payment_method_id'];
                                                                });
                                                            @endphp

                                                            <div class="accordion-body px-0">
                                                                <div class="payment-body-items d-flex gap-100px align-items-center">
                                                                    <p class="grey-color d-flex gap-12px">
                                                                        <img src="{{ asset('webAssets/assets/images/VISA.svg') }}" alt="">
                                                                        {{ ucfirst($paymentMethod['brand']) }} Card XXXX {{ $paymentMethod['last4'] }}
                                                                    </p>
                                                                    <div class="payment-body-action-btn d-flex gap-12px align-items-center">
                                                                        <p class="grey-color">{{ $paymentMethod['exp_month'] }}/{{ $paymentMethod['exp_year'] }}</p>

                                                                        <!-- Check if there's a pending payment, if so, handle alert -->
                                                                        <button type="button" class="btn btn-delete border-0 py-0 delete-card-btn {{ $hasPendingPayment ? 'disabled blurred' : '' }}" 
                                                                            data-payment-id="{{ $paymentMethod['payment_method_id'] }}" 
                                                                            data-card-id="{{ $paymentMethod['client_Card_id'] }}" 
                                                                            {{ $hasPendingPayment ? 'onclick="showAlert(event)"' : '' }}>
                                                                            <img src="{{ asset('webAssets/assets/images/delete-icon.svg') }}" alt="">
                                                                        </button>
                                                                    </div>
                                                                </div>

                                                                <!-- Delete confirmation modal -->
                                                                <div class="modal fade cancel-alert" id="deleteAlert" tabindex="-1" aria-labelledby="deleteAlertLabel"
                                                                    aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
                                                                    <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/alert-icon.svg')}}" alt="alert">
                                                                                </div>
                                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                            </div>
                                                                            <div class="delete-account-modal-body">
                                                                                <div class="alert-box d-flex align-items-center flex-column">
                                                                                    <h3 class="heading text-center">Are you sure you want to delete this card?</h3>
                                                                                </div>
                                                                            </div>
                                                                            <div class="delete-action-btn d-flex align-items-center">
                                                                                <button type="button" class="btn btn-decline w-100" id="confirm-delete-btn">Yes</button>
                                                                                <button type="button" class="btn btn-primary w-100" data-bs-dismiss="modal">No</button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="accordion-body px-0">
                                                            <p class="grey-color">No payment methods available.</p>
                                                        </div>
                                                    @endif
                                                </div>

                                            </div>


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

                                <div class="payment-action-btn">
                                    <button type="button" class="btn btn-primary"
                                        data-bs-toggle="modal" data-bs-target="#paymentCard">
                                        Add New Card
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Modal -->
                        <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="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>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('footerItems')
@endsection

@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif
<script src="https://js.stripe.com/v3/"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></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);
            },
        });
    });
});

$(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) {
                    toastr.error("Please fill valid card details!");
                }
            });
        }

    });

    $(document).ready(function() {
    var paymentId, cardId;

    // Capture payment and card id from the button and store them when delete button is clicked
    $('.delete-card-btn').on('click', function() {
        paymentId = $(this).data('payment-id');
        cardId = $(this).data('card-id');
    });

    // Confirm deletion and make AJAX request to delete the card
    $('#confirm-delete-btn').on('click', function() {
        $.ajax({
            url: "{{ route('client.paymentCard.destroy') }}", // Assuming you have the route setup
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                payment_id: paymentId,
                card_id: cardId
            },
            success: function(response) {
                if (response.success) {
                    toastr.success('Payment card deleted successfully.');
                    setTimeout(() => {
                        location.reload();  // Reload the page after successful deletion
                    }, 1000);
                } else {
                    toastr.error('Failed to delete payment card.');
                }
                $('#deleteAlert').modal('hide');
            },
            error: function(xhr, status, error) {
                toastr.error('An error occurred while deleting the card.');
                $('#deleteAlert').modal('hide');
            }
        });
    });
});



    // 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('');
    });


});

    function showAlert(event) {
        event.preventDefault(); // Prevent default action
        alert("You cannot delete the card as you have already booked a service with this card's details.");
    }

</script>