@extends("website.service-providers.layouts.layout")
@section('title', "Services")
@section("body")
<!-- <section class="banner-services">
    <img class="banner-background-ellipse" src="{{ asset('webAssets/assets/images/banner-bg-img.png') }}" alt="">
</section> -->
<style>
    .eye-icon {
        position: initial;
        cursor: pointer;
    }

    .hidden-details {
        display: none;
    }
</style>
<!--- Breadcrumbs section -->

<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">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 section started -->

<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")


            <div class="main-content">
                <div class="main-content-wrapper my-profile">

                    <div class="payment-block">
                        <h3 class="font-size-24 py-3">Payment</h3>
                        <h4 class="font-size-24 py-3">Stripe</h4>
                        <!-- ADD PAYMENT GATEWAYS BELOW  -->

                        <div class="provider-payment payment-details-item">
                            <div class="payments-items w-100">
                                <div class="payment-action-btn">

                                    @if(isset($accountDetails) && isset($accountDetails['status']) && $accountDetails['status'] === 200)
                                        <div id="stripCard">
                                        <h5 class="red-text p-2" style="text-align: center;color: red;">{{ ($accountDetails['accountDetails']['payouts_enabled'] ?? false) ? '' : '*Payout is not enabled wait for 24 hours!' }}</h5>
                                            <div class="strip-inside-details d-flex gap-12px align-items-center">
                                                <span id="eyeIcon" class="eye-icon"><i class="fas fa-eye"></i></span>
                                                <!-- Eye icon -->

                                                <span
                                                    class="btn border-0 blue-color  p-0 d-flex gap-8px align-items-center">
                                                    <div class="stripe-home-img">


                                                        <svg width="23" height="19" viewBox="0 0 23 19" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path
                                                                d="M22.5 17.5005C22.5 17.6994 22.421 17.8901 22.2803 18.0308C22.1397 18.1715 21.9489 18.2505 21.75 18.2505H0.75C0.551088 18.2505 0.360322 18.1715 0.21967 18.0308C0.0790176 17.8901 0 17.6994 0 17.5005C0 17.3016 0.0790176 17.1108 0.21967 16.9701C0.360322 16.8295 0.551088 16.7505 0.75 16.7505H21.75C21.9489 16.7505 22.1397 16.8295 22.2803 16.9701C22.421 17.1108 22.5 17.3016 22.5 17.5005ZM0.778125 7.20485C0.733517 7.04756 0.741523 6.88001 0.800925 6.7277C0.860328 6.57538 0.967872 6.44665 1.10719 6.3611L10.8572 0.361096C10.9753 0.288457 11.1113 0.25 11.25 0.25C11.3887 0.25 11.5247 0.288457 11.6428 0.361096L21.3928 6.3611C21.5322 6.44655 21.6398 6.57519 21.6993 6.72744C21.7588 6.87969 21.767 7.04721 21.7225 7.20452C21.678 7.36182 21.5834 7.50029 21.4529 7.59884C21.3225 7.69739 21.1635 7.75064 21 7.75047H18.75V13.7505H20.25C20.4489 13.7505 20.6397 13.8295 20.7803 13.9701C20.921 14.1108 21 14.3016 21 14.5005C21 14.6994 20.921 14.8901 20.7803 15.0308C20.6397 15.1715 20.4489 15.2505 20.25 15.2505H2.25C2.05109 15.2505 1.86032 15.1715 1.71967 15.0308C1.57902 14.8901 1.5 14.6994 1.5 14.5005C1.5 14.3016 1.57902 14.1108 1.71967 13.9701C1.86032 13.8295 2.05109 13.7505 2.25 13.7505H3.75V7.75047H1.5C1.33668 7.75053 1.1778 7.69727 1.04751 7.59879C0.917215 7.50031 0.82263 7.36199 0.778125 7.20485ZM12.75 13.0005C12.75 13.1994 12.829 13.3901 12.9697 13.5308C13.1103 13.6715 13.3011 13.7505 13.5 13.7505C13.6989 13.7505 13.8897 13.6715 14.0303 13.5308C14.171 13.3901 14.25 13.1994 14.25 13.0005V8.50047C14.25 8.30156 14.171 8.11079 14.0303 7.97014C13.8897 7.82949 13.6989 7.75047 13.5 7.75047C13.3011 7.75047 13.1103 7.82949 12.9697 7.97014C12.829 8.11079 12.75 8.30156 12.75 8.50047V13.0005ZM8.25 13.0005C8.25 13.1994 8.32902 13.3901 8.46967 13.5308C8.61032 13.6715 8.80109 13.7505 9 13.7505C9.19891 13.7505 9.38968 13.6715 9.53033 13.5308C9.67098 13.3901 9.75 13.1994 9.75 13.0005V8.50047C9.75 8.30156 9.67098 8.11079 9.53033 7.97014C9.38968 7.82949 9.19891 7.75047 9 7.75047C8.80109 7.75047 8.61032 7.82949 8.46967 7.97014C8.32902 8.11079 8.25 8.30156 8.25 8.50047V13.0005Z"
                                                                fill="#2446C0" />
                                                        </svg>
                                                    </div>
                                                    <div class="stripe-account-inner d-flex flex-column align-items-start">
                                                        <p class="fw-bold heading-color">Stripe Account</p>
                                                        <p class="para "> {{ $accountDetails['accountDetails']['external_account']['routing_number']}} **** {{ $accountDetails['accountDetails']['external_account']['last4']}}</p>
                                                    </div>
                                                    <div class="currency-indicator">
                                                        <p class="currency">{{ $accountDetails['accountDetails']['external_account']['country']}}</p>
                                                       
                                                    </div>
                                                </span>
                                            </div>
                                        </div>
                                    @elseif(isset($accountDetails) && isset($accountDetails['onboarding_link']))
                                        <a href="{{ $accountDetails['onboarding_link'] }}" class="stripActionBtn">
                                            <span
                                                class="btn border-0 blue-color text-decoration-underline p-0 d-flex gap-8px align-items-center"><img
                                                    src="{{ asset('webAssets/assets/images/Vector.png') }}"
                                                    alt="stripe-icon">
                                                <p class="blue-color">Connect to
                                                    Stripe for complete onboarding</p>
                                            </span> </a>

                                    @else

                                        <a id="stripeForm" type="button" class="stripActionBtn">
                                            <span
                                                class="btn border-0 blue-color text-decoration-underline p-0 d-flex gap-8px align-items-center"><img
                                                    src="{{ asset('webAssets/assets/images/Vector.png') }}"
                                                    alt="stripe-icon">
                                                <p class="blue-color">Connect to
                                                    Stripe</p>
                                            </span> </a>

                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @if(isset($accountDetails) && isset($accountDetails['status']) && $accountDetails['status'] === 200)

                    <div id="stripCardDetails"  class="hidden-details">
                        <div
                            class="stripcard-details-wrapper d-flex justify-content-between flex-wrap align-items-center gap-12px">
                            <div class="stripecard-inner">
                                <p class="para">Type</p>
                                <h6 class="heading font-size-14px">{{ ucfirst($accountDetails['accountDetails']['type'])}}</h6>
                            </div>
                            <div class="stripecard-inner">
                                <p class="para">Created</p>
                                <h6 class="heading font-size-14px"> {{ \Carbon\Carbon::createFromTimestamp($accountDetails['accountDetails']['created'])->format('M d, Y, h:i a') }}</h6>
                            </div>
                            <div class="stripecard-inner">
                                <p class="para">Origin</p>
                                <h6 class="heading font-size-14px">{{ $accountDetails['accountDetails']['country']}}</h6>
                            </div>
                            <div class="stripecard-inner">
                                <p class="para">Fingerprint</p>
                                <h6 class="heading font-size-14px">{{ $accountDetails['accountDetails']['external_account']['fingerprint']}}</h6>
                            </div>
                            <div class="stripecard-inner">
                                <p class="para">Routing Number</p>
                                <h6 class="heading font-size-14px">{{ $accountDetails['accountDetails']['external_account']['routing_number']}}</h6>
                            </div>
                            <div class="stripecard-inner">
                                <p class="para">ID</p>
                                <h6 class="heading font-size-14px">{{ $accountDetails['accountDetails']['external_account']['id']}}</h6>
                            </div>

                        </div>
                    </div>
                @endif
            </div>
        </div>
</section>


<!-- Modal HTML -->
<div class="modal fade" id="warningModal" tabindex="-1" aria-labelledby="warningModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="warningModalLabel">Before Connecting to Stripe</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Please ensure you have completed the following steps before proceeding:</p>
                <ul>
                    <li>Verify your email associated with Stripe.</li>
                    <li>Ensure your account information is correct and up-to-date.</li>
                    <li>Understand the terms and conditions of Stripe.</li>
                </ul>
                <p>Click "Proceed" to continue to Stripe setup.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="proceedToStripe" class="btn btn-primary">Proceed</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">

<script>
    $(document).ready(function () {
        // Set up CSRF token for all AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Show modal when Connect to Stripe button is clicked
        $('#stripeForm').on('click', function (event) {
            event.preventDefault();
            $('#warningModal').modal('show');
        });

        // Proceed with Stripe connection after user confirms
        $('#proceedToStripe').on('click', function () {
            $('#warningModal').modal('hide');
            $.ajax({
                url: "{{ route('sp.profile.addPaymentAccount') }}",
                type: 'POST',
                dataType: 'json',
                success: function (response) {
                    console.log(response);

                    if (response.status === 400 || response.status === 500) {
                        toastr.error(response.error?.message || 'An error occurred.');
                    } else if (response.status === 200 && response.setupLink) {
                        window.location.href = response.setupLink;
                    } else {
                        toastr.error('Unexpected response from server.');
                    }
                },
                error: function (xhr) {
                    let response = xhr.responseJSON;
                    let message = response?.error?.message || 'An unexpected error occurred.';

                    console.error('AJAX Error:', message);
                    toastr.error(message);
                }
            });

        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    var eyeIcon = document.getElementById('eyeIcon');
    var hiddenDetails = document.getElementById('stripCardDetails'); // Ensure this element has the correct ID

    // Check if eyeIcon and hiddenDetails exist before adding event listener
    if (eyeIcon && hiddenDetails) {
        eyeIcon.addEventListener('click', function() {
            // Toggle hidden-details visibility
            if (hiddenDetails.classList.contains('hidden-details')) {
                hiddenDetails.classList.remove('hidden-details');
            } else {
                hiddenDetails.classList.add('hidden-details');
            }
        });
    }
})
</script>

@endsection