@extends('themes.frontend.layouts.app')
@section('content')
    <section class="listing blog details">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 blog-pots mt-5 mb-5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="blog-info details overview">
                                <div class="row justify-content-center">
                                    <div class="col-md-9">

                                        @if (session()->has('message'))
                                            <x-form.web.alert type="{{ session()->get('alert') }}"
                                                title="{{ session()->get('title') }}"
                                                message="{{ session()->get('message') }}" />
                                        @endif

                                        <div class="text-center">
                                            <h3 class="text-center mb-4">{!! $model->title !!}</h3>
                                            {!! $model->description !!}
                                        </div>

                                    </div>
                                    <div class="col-md-6">
                                        <div class="property-location text-center">
                                            <div class="col-sm-12">
                                                <x-form.field.web.button type="button" id="resendBtn" name="resendBtn"
                                                    text="{{ __('auth.web.verify_email.resend_btn_txt') }}" showIcon="true" />

                                                <div id="resendMsg" class="text-success mt-2" style="display:none;"></div>
                                                <div id="resendTimer" class="text-muted mt-1" style="display:none;"></div>
                                                <div>
                                                    <small class="text-muted">Didn’t receive the email? You can request a
                                                        new
                                                        verification link.</small>
                                                </div>
                                                <a href="{{ module_url('web.login') }}" class="color-btn js-fancybox" data-fancybox data-type="iframe" data-width="600" data-height="720">{{ __('auth.web.login_txt') }} <i class="fas fa-sign-in-alt"></i></a>
                                                <a href="{{ module_url('web.signup') }}" class="color-btn js-fancybox" data-fancybox data-type="iframe" data-width="600" data-height="720">{{ __('auth.web.signup_txt') }} <i class="fas fa-sign-in-alt"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script>
        let resendCooldown = 60;
        let resendInterval = null;

        $('#resendBtn').on('click', function() {
            let $btn = $(this);

            // Prevent double click
            if ($btn.prop('disabled')) return;

            $btn.prop('disabled', true);

            $.ajax({
                url: "{{ module_url('web.verification.resend') }}",
                type: 'POST',
                headers: {
                    'Accept': 'application/json'
                },
                data: {
                    _token: '{{ csrf_token() }}',
                    email: '{{ session('signup_email') }}'
                },
                success: function(data) {
                    $('#resendMsg')
                        .text(data['msg'])
                        .show();

                    startResendCountdown($btn);
                },
                error: function() {
                    // Even on error, keep UX consistent
                    startResendCountdown($btn);
                }
            });
        });

        function startResendCountdown($btn) {
            let seconds = resendCooldown;

            $('#resendTimer')
                .text(`You can resend again in ${seconds}s`)
                .show();

            resendInterval = setInterval(function() {
                seconds--;

                $('#resendTimer').text(`You can resend again in ${seconds}s`);

                if (seconds <= 0) {
                    clearInterval(resendInterval);
                    $('#resendTimer').hide();
                    $btn.prop('disabled', false);
                }
            }, 1000);
        }
    </script>
@endpush