<template>
    <div>
        <div id="stripe" class="tab-content stripe-connect-box">
            <!-- Not Connected State -->
            <div class="tab-pane fade show active" v-if="!user.stripe_account_id">
                <div class="stripe-connect-container p-0">
                    <!-- Header Section -->
                    <div class="stripe-header mb-3">
                        <div class="d-flex align-items-center mb-1">
                            <div class="stripe-icon-wrapper me-3">
                                <i class="fab fa-stripe"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 lh-sm">{{ trans('em.stripe_marketplace_integration') }}</h6>
                                <p class="text-muted mb-0 small">{{ trans('em.connect_stripe_account') }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Benefits Section -->
                    <div class="benefits-section mb-3">
                        <h6 class="mb-1">
                            <i class="fas fa-star text-warning me-2"></i>
                            {{ trans('em.why_connect_stripe') }}
                        </h6>
                        <div class="row gap-lg-0 gap-2">
                            <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-12 mb-1">
                                <div class="benefit-card d-flex align-items-center">
                                    <div class="benefit-icon me-3">
                                        <i class="fas fa-money-bill-wave text-success"></i>
                                    </div>
                                    <div class="benefit-content text-start">
                                        <h6 class="mb-0">{{ trans('em.direct_payments') }}</h6>
                                        <p class="mb-0">{{ trans('em.direct_payments_desc') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-12 mb-1">
                                <div class="benefit-card d-flex align-items-center">
                                    <div class="benefit-icon me-3">
                                        <i class="fas fa-chart-line text-primary"></i>
                                    </div>
                                    <div class="benefit-content text-start">
                                        <h6 class="mb-0">{{ trans('em.automatic_payouts') }}</h6>
                                        <p class="mb-0">{{ trans('em.automatic_payouts_desc') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-12 mb-1">
                                <div class="benefit-card d-flex align-items-center">
                                    <div class="benefit-icon me-3">
                                        <i class="fas fa-shield-alt text-info"></i>
                                    </div>
                                    <div class="benefit-content text-start">
                                        <h6 class="mb-0">{{ trans('em.secure_compliant') }}</h6>
                                        <p class="mb-0">{{ trans('em.secure_compliant_desc') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-12 mb-1">
                                <div class="benefit-card d-flex align-items-center">
                                    <div class="benefit-icon me-3">
                                        <i class="fas fa-clock text-warning"></i>
                                    </div>
                                    <div class="benefit-content text-start">
                                        <h6 class="mb-0">{{ trans('em.faster_access') }}</h6>
                                        <p class="mb-0">{{ trans('em.faster_access_desc') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- How It Works Section -->
                    <div class="how-it-works-section mb-3">
                        <h6 class="mb-0">
                            <i class="fas fa-cogs text-info me-2"></i>
                            {{ trans('em.how_it_works') }}
                        </h6>
                        <div class="process-flow container">
                            <div class="process-step ">
                                <div class="step-number">1</div>
                                <div class="step-content">
                                    <h6 class="mb-0">{{ trans('em.customer_purchases_ticket') }}</h6>
                                    <p>{{ trans('em.customer_purchases_ticket_desc') }}</p>
                                </div>
                            </div>
                            <div class="process-step ">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h6 class="mb-0">{{ trans('em.automatic_split') }}</h6>
                                    <p>{{ trans('em.automatic_split_desc') }}</p>
                                </div>
                            </div>
                            <div class="process-step ">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h6 class="mb-0">{{ trans('em.direct_deposit') }}</h6>
                                    <p>{{ trans('em.direct_deposit_desc') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Connect Button Section -->
                    <div class="connect-section">
                        <div class="text-center">
                            <a :href="createStripeAccount()" class="btn btn-primary btn-lg connect-stripe-btn">
                                <i class="fab fa-stripe me-2"></i>
                                {{ trans('em.connect_stripe') }}
                            </a>
                            <p class="text-muted mt-2 mb-lg-0 mb-3">
                                <small>
                                    <i class="fas fa-lock me-1"></i>
                                    {{ trans('em.secure_connection_stripe') }}
                                </small>
                            </p>
                        </div>
                    </div>

                    <!-- Requirements Section -->
                    <div class="requirements-section mb-3">
                        <h6 class="mb-2">
                            <i class="fas fa-clipboard-check text-success me-2"></i>
                            {{ trans('em.account_requirements') }}
                        </h6>
                        <div class="alert alert-info">
                            <div class="d-flex align-items-start small">
                                <i class="fas fa-info-circle me-2 mt-1"></i>
                                <div>
                                    <strong>{{ trans('em.important') }}</strong> {{ trans('em.stripe_receive_payouts') }}
                                    <ul class="mb-0 mt-2">
                                        <li><strong>{{ trans('em.card_payments') }}</strong> {{ trans('em.card_payments_desc') }} </li>
                                        <li><strong>{{ trans('em.transfers') }}</strong> {{ trans('em.transfers_desc') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                  

                    <!-- Additional Info -->
                    <div class="additional-info mt-0">
                        <div class="row gap-lg-0 gap-2">
                            <div class="col-md-6">
                                <div class="info-card">
                                    <h6 class="mb-1"><i class="fas fa-question-circle text-primary me-2"></i>{{trans('em.need_help')}} Need Help?</h6>
                                    <p class="mb-2">{{ trans('em.connection_support_team') }}</p>
                                    <a :href="`mailto:${contact_email}`" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-envelope me-1"></i>{{  trans('em.contact_support') }}
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-card">
                                    <h6 class="mb-1"><i class="fas fa-book text-info me-2"></i>{{ trans('em.learn_more') }}</h6>
                                    <p class="mb-2">{{ trans('em.visit_stripe_documentation') }}</p>
                                    <a href="https://stripe.com/docs/connect" target="_blank" class="btn btn-outline-info btn-sm">
                                        <i class="fas fa-external-link-alt me-1"></i>{{ trans('em.stripe_docs') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Connected State -->
            <div class="tab-pane fade show active" v-else>
                <div class="stripe-connected-container p-0">
                    <!-- Status Card -->
                    <div class="status-card mb-3">
                        <div class="d-flex align-items-center justify-content-between flex-wrap">
                            <div class="d-flex align-items-center flex-wrap">
                                <div class="status-icon me-3">
                                    <i class="fab fa-stripe"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">{{ trans('em.stripe_account_connected') }}</h6>
                                    <p class="mb-0 text-success">
                                        <i class="fas fa-check-circle me-1"></i>
                                        {{ trans('em.account_verified_ready') }}
                                    </p>
                                </div>
                            </div>
                            <div class="status-badge">
                                <span class="badge bg-success text-white me-2">{{ trans('em.active') }}</span>
                                <button @click="disconnectStripe" class="btn btn-outline-danger btn-sm">
                                    <i class="fas fa-unlink me-1"></i>
                                    {{ trans('em.stipe_disconnect') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Account Information -->
                    <div class="account-info-section mb-3">
                        <div class="row">
                            <div class="col-md-6 mb-1">
                                <div class="info-item">
                                    <label class="form-label">{{ trans('em.account_type') }}</label>
                                    <p class="mb-0">{{ trans('em.stripe_connect_standard') }}</p>
                                </div>
                            </div>
                            <div class="col-md-6 mb-1">
                                <div class="info-item">
                                    <label class="form-label">{{ trans('em.payment_status') }}</label>
                                    <p class="mb-0 text-success">
                                        <i class="fas fa-check-circle me-1"></i>
                                        {{ trans('em.ready_receive_payments') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Important Notes -->
                    <div class="important-notes mb-3">
                        <div class="alert alert-warning">
                            <div class="d-flex align-items-start">
                                <i class="fas fa-lightbulb me-2 mt-1"></i>
                                <div>
                                    <strong>{{ trans('em.payout_requirements') }}</strong> {{ trans('em.payout_requirements_desc') }}
                                    <ul class="mb-0 mt-2">
                                        <li><strong>{{ trans('em.transfers') }}</strong> {{ trans('em.transfers_desc_automatic') }}</li>
                                        <li><strong>{{ trans('em.legacy_payments') }}</strong> {{ trans('em.legacy_payments_desc') }}</li>
                                    </ul>
                                    <div class="mt-3">
                                        <a target="_blank" href="https://stripe.com/docs/connect/required-verification-information#US-full-individual--card_payments|transfers" class="btn btn-outline-warning btn-sm">
                                            <i class="fas fa-external-link-alt me-1"></i>
                                            {{ trans('em.learn_more_about_requirements') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Next Steps -->
                    <div class="next-steps-section">
                        <h6 class="mb-1">
                            <i class="fas fa-arrow-right text-success me-2"></i>
                            {{ trans('em.next_steps') }}
                        </h6>
                        <div class="row">
                            <div class="col-md-4 mb-1">
                                <div class="step-card">
                                    <div class="step-icon">
                                        <i class="fas fa-calendar-plus"></i>
                                    </div>
                                    <h6>{{ trans('em.create_events') }}</h6>
                                    <p class="mb-0">{{ trans('em.create_events_desc') }}</p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-1">
                                <div class="step-card">
                                    <div class="step-icon">
                                        <i class="fas fa-chart-bar"></i>
                                    </div>
                                    <h6>{{ trans('em.monitor_earnings') }}</h6>
                                    <p class="mb-0">{{ trans('em.monitor_earnings_desc') }}</p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-1">
                                <div class="step-card">
                                    <div class="step-icon">
                                        <i class="fas fa-cog"></i>
                                    </div>
                                    <h6>{{ trans('em.manage_settings') }}</h6>
                                    <p class="mb-0">{{ trans('em.manage_settings_desc') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

<script>
import mixinsFilters from '../../../../mixins.js';
export default {
    props: ["user", "csrf_token"],

    mixins: [mixinsFilters],
    data() {
        return {
            is_organiser : is_organiser,
            contact_email : contact_email,
        };
    },
    methods: {

        // Create Stripe Account
        createStripeAccount() {
            return route("connect_stripe");
        },

        // Disconnect Stripe Account
        async disconnectStripe() {
            // Ask for confirmation first
            const confirmed = await this.showConfirm(trans('em.disconnect_stripe_confirm'));
            if (!confirmed) {
                return;
            }
            
            try {
                const response = await axios.post(route('eventmie.stripeDisconnect'));
                console.log('response', response);
                
                if (response.data.success) {
                    this.showNotification('success', response.data.message, 'success');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    this.showNotification('error', response.data.message, 'error');
                }
            } catch (error) {
                this.showNotification('error', 'Something went wrong', 'error');
            }
        },
    },
    mounted() {
    }
};
</script>


