<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

trait ElementSell_Widget_Content_Template {

    protected function render_form_content_template() {
        $show_billing_hint = false;
        $billing_admin_url = elementsell_get_billing_admin_url();
        $billing_hint_text = __( 'Uložte platební kartu', 'platebni-formular' );

        if ( ! elementsell_is_elementor_context() ) {
            $show_billing_hint = elementsell_should_show_billing_form_hint();
            $billing_hint_text = elementsell_billing_is_payment_failed()
                ? __( 'Aktualizujte platební kartu', 'platebni-formular' )
                : __( 'Uložte platební kartu', 'platebni-formular' );
        }
        ?>
        <#
        var widgetId = view.getID();
        var wrapperId = 'elementsell-payment-' + widgetId;
        var amount = settings.amount ? settings.amount : 100;
        var buttonText = settings.button_text ? settings.button_text : <?php echo wp_json_encode( __( 'Zaplatit', 'platebni-formular' ) ); ?>;
        var showBillingHint = <?php echo $show_billing_hint ? 'true' : 'false'; ?>;
        var billingAdminUrl = <?php echo wp_json_encode( $billing_admin_url ); ?>;
        var billingHintText = <?php echo wp_json_encode( $billing_hint_text ); ?>;
        var formatKc = function( val ) {
            var n = Math.round( parseFloat( val ) || 0 );
            return n.toString().replace( /\B(?=(\d{3})+(?!\d))/g, ' ' ) + ' Kč';
        };
        var upsellDefaultProduct = <?php echo wp_json_encode( __( 'Doplněk', 'platebni-formular' ) ); ?>;
        var upsellPreviewBadge = <?php echo wp_json_encode( __( 'Náhled upsell', 'platebni-formular' ) ); ?>;
        var upsellPreviewHint = <?php echo wp_json_encode( __( 'Zobrazí se zákazníkovi po kliknutí na tlačítko platby.', 'platebni-formular' ) ); ?>;
        var upsellAcceptLabel = <?php echo wp_json_encode( __( 'Ano, přidat za %s Kč', 'platebni-formular' ) ); ?>;
        var upsellDeclineLabel = <?php echo wp_json_encode( __( 'Ne díky, pokračovat k platbě', 'platebni-formular' ) ); ?>;
        #>
        <div id="{{{ wrapperId }}}" class="elementsell-payment-widget<# if ( showBillingHint ) { #> elementsell-payment-widget--attention<# } #>" style="text-align:center; position: relative;">
            <# if ( showBillingHint ) { #>
                <a class="elementsell-billing-form-hint" href="{{{ billingAdminUrl }}}">{{{ billingHintText }}}</a>
            <# } #>

            <form id="payment-form-{{{ widgetId }}}" class="elementsell-payment-form" method="POST" action="#" onsubmit="return false;">
                <# if ( 'yes' === settings.show_name ) { #>
                    <input type="text" class="elementsell-field" name="first_name" placeholder="Jméno">
                <# } #>

                <# if ( 'yes' === settings.show_surname ) { #>
                    <input type="text" class="elementsell-field" name="surname" placeholder="Příjmení">
                <# } #>

                <# if ( 'yes' === settings.show_email ) { #>
                    <input type="email" class="elementsell-field" name="email" placeholder="Email">
                <# } #>

                <# if ( 'yes' === settings.show_phone ) { #>
                    <input type="tel" class="elementsell-field" name="phone" placeholder="Telefonní číslo">
                <# } #>

                <# if ( 'yes' === settings.show_address ) { #>
                    <input type="text" class="elementsell-field" name="address" placeholder="Adresa">
                <# } #>

                <# if ( 'yes' === settings.show_company ) { #>
                    <input type="text" class="elementsell-field" name="company" placeholder="Firma">
                <# } #>

                <# if ( 'yes' === settings.show_ico ) { #>
                    <input type="text" class="elementsell-field" name="ico" placeholder="IČO">
                <# } #>

                <# if ( 'yes' === settings.show_dic ) { #>
                    <input type="text" class="elementsell-field" name="dic" placeholder="DIČ">
                <# } #>

                <# var customFieldsEnabled = ! settings.hasOwnProperty( 'show_custom_fields' ) || 'yes' === settings.show_custom_fields;
                if ( customFieldsEnabled && settings.custom_fields && settings.custom_fields.length ) {
                    _.each( settings.custom_fields, function( field, index ) {
                        var customLabel = field.label ? field.label : <?php echo wp_json_encode( __( 'Vlastní pole', 'platebni-formular' ) ); ?>;
                        var customType = field.type ? field.type : 'text';
                        var fieldName = 'elementsell_custom_fields[' + index + ']';
                #>
                        <# if ( 'switch' === customType ) { #>
                            <label class="elementsell-custom-switch">
                                <input type="checkbox" name="{{{ fieldName }}}[value]" value="1">
                                <span>{{{ customLabel }}}</span>
                            </label>
                        <# } else if ( 'date' === customType ) {
                            var dateTerms = [];
                            var normalizeEditorDate = function( dateValue ) {
                                dateValue = String( dateValue || '' ).trim();
                                var dateMatch = dateValue.match( /^(\d{4}-\d{2}-\d{2})/ );
                                return dateMatch ? dateMatch[1] : '';
                            };
                            var formatEditorDateTerm = function( termValue ) {
                                termValue = normalizeEditorDate( termValue );
                                if ( ! termValue ) {
                                    return '';
                                }
                                var match = termValue.match( /^(\d{4})-(\d{2})-(\d{2})$/ );
                                if ( ! match ) {
                                    return termValue;
                                }
                                return parseInt( match[3], 10 ) + '. ' + parseInt( match[2], 10 ) + '. ' + match[1];
                            };
                            if ( field.date_terms ) {
                                if ( Array.isArray( field.date_terms ) ) {
                                    _.each( field.date_terms, function( item ) {
                                        var termValue = normalizeEditorDate(
                                            item && ( item.date || item.value ) ? item.date || item.value : item
                                        );
                                        if ( termValue ) {
                                            dateTerms.push( termValue );
                                        }
                                    } );
                                } else {
                                    _.each( String( field.date_terms ).split( /\r?\n/ ), function( line ) {
                                        line = normalizeEditorDate( line );
                                        if ( line ) {
                                            dateTerms.push( line );
                                        }
                                    } );
                                }
                            }
                            if ( ! dateTerms.length ) {
                                _.each( [ 'date_term_1', 'date_term_2', 'date_term_3' ], function( termKey ) {
                                    var legacyTerm = normalizeEditorDate( field[ termKey ] );
                                    if ( legacyTerm ) {
                                        dateTerms.push( legacyTerm );
                                    }
                                } );
                            }
                            var fieldId = 'elementsell-custom-field-' + index;
                        #>
                            <div class="elementsell-custom-field elementsell-custom-field--date">
                                <# if ( dateTerms.length > 1 ) { #>
                                    <label class="elementsell-field-label" for="{{{ fieldId }}}">{{{ customLabel }}}</label>
                                    <select id="{{{ fieldId }}}" class="elementsell-field" name="{{{ fieldName }}}[value]">
                                        <option value=""><?php echo esc_html__( 'Vyberte termín', 'platebni-formular' ); ?></option>
                                        <# _.each( dateTerms, function( dateTerm ) { #>
                                            <option value="{{{ dateTerm }}}">{{{ formatEditorDateTerm( dateTerm ) }}}</option>
                                        <# } ); #>
                                    </select>
                                <# } else if ( 1 === dateTerms.length ) { #>
                                    <span class="elementsell-field-label">{{{ customLabel }}}</span>
                                    <div class="elementsell-date-value">{{{ formatEditorDateTerm( dateTerms[0] ) }}}</div>
                                    <input type="hidden" name="{{{ fieldName }}}[value]" value="{{{ dateTerms[0] }}}">
                                <# } else { #>
                                    <label class="elementsell-field-label" for="{{{ fieldId }}}">{{{ customLabel }}}</label>
                                    <input type="date" id="{{{ fieldId }}}" class="elementsell-field" name="{{{ fieldName }}}[value]">
                                <# } #>
                            </div>
                        <# } else { #>
                            <input type="text" class="elementsell-field" name="{{{ fieldName }}}[value]" placeholder="{{{ customLabel }}}">
                        <# } #>
                <#   });
                } else if ( ( ! settings.hasOwnProperty( 'show_custom_fields' ) || 'yes' === settings.show_custom_fields ) && 'yes' === settings.show_custom_field ) {
                    var customLabel = settings.custom_field_label ? settings.custom_field_label : <?php echo wp_json_encode( __( 'Vlastní pole', 'platebni-formular' ) ); ?>;
                    var customType = settings.custom_field_type ? settings.custom_field_type : 'text';
                #>
                    <# if ( 'switch' === customType ) { #>
                        <label class="elementsell-custom-switch">
                            <input type="checkbox" name="custom_field_value" value="1">
                            <span>{{{ customLabel }}}</span>
                        </label>
                    <# } else if ( 'date' === customType ) {
                        var legacyFieldId = 'elementsell-legacy-custom-field';
                    #>
                        <div class="elementsell-custom-field elementsell-custom-field--date">
                            <label class="elementsell-field-label" for="{{{ legacyFieldId }}}">{{{ customLabel }}}</label>
                            <input type="date" id="{{{ legacyFieldId }}}" class="elementsell-field" name="custom_field_value">
                        </div>
                    <# } else { #>
                        <input type="text" class="elementsell-field" name="custom_field_value" placeholder="{{{ customLabel }}}">
                    <# } #>
                <# } #>

                <# if ( 'yes' === settings.show_discount_code ) { #>
                    <input type="text" class="elementsell-field" id="discount_code-{{{ widgetId }}}" name="discount_code" placeholder="Slevový kód">
                <# } #>

                <# if ( settings.crossed_amount ) { #>
                    <div class="elementsell-price-block">
                        <div class="elementsell-price-old">
                            {{{ formatKc( settings.crossed_amount ) }}}
                        </div>
                <# } #>

                <div class="elementsell-price-main<# if ( ! settings.crossed_amount ) { #> elementsell-price-main--solo<# } #>" id="original-price-{{{ widgetId }}}">
                    {{{ formatKc( amount ) }}}
                </div>

                <# if ( settings.crossed_amount ) { #>
                    </div>
                <# } #>

                <button type="button" class="platebni-button">{{{ buttonText }}}</button>

                <p class="elementsell-payment-consent">
                    Kliknutím souhlasíte se <a href="#">zpracováním osobních údajů</a>.
                </p>
            </form>

            <p class="elementsell-payment-byline">Platbu zajišťuje <a href="https://elementsell.cz" target="_blank" rel="noopener noreferrer">ElementSell</a></p>

            <# if ( 'yes' === settings.upsell_enable ) {
                var upsellPrice = Math.round( parseFloat( settings.upsell_price ) || 0 );
                if ( upsellPrice > 0 ) {
                    var upsellTitle = settings.upsell_title ? settings.upsell_title : ( settings.upsell_product_name ? settings.upsell_product_name : upsellDefaultProduct );
                    var upsellDescription = settings.upsell_description ? settings.upsell_description : '';
                    var upsellCrossed = Math.round( parseFloat( settings.upsell_crossed_price ) || 0 );
                    var upsellImageUrl = settings.upsell_image && settings.upsell_image.url ? settings.upsell_image.url : '';
                    var upsellButtonColor = settings.button_color ? settings.button_color : '#22c55e';
                    var upsellPriceFmt = formatKc( upsellPrice ).replace( ' Kč', '' );
                    var upsellAcceptText = upsellAcceptLabel.replace( '%s', upsellPriceFmt );
            #>
            <div class="elementsell-upsell-editor-preview">
                <span class="elementsell-upsell-editor-preview__badge">{{{ upsellPreviewBadge }}}</span>
                <p class="elementsell-upsell-editor-preview__hint">{{{ upsellPreviewHint }}}</p>
                <div class="elementsell-upsell-modal__card" role="presentation">
                    <# if ( upsellImageUrl ) { #>
                        <div class="elementsell-upsell-modal__image-wrap">
                            <img class="elementsell-upsell-modal__image" src="{{{ upsellImageUrl }}}" alt="">
                        </div>
                    <# } #>
                    <h2 class="elementsell-upsell-modal__title">{{{ upsellTitle }}}</h2>
                    <# if ( upsellDescription ) { #>
                        <p class="elementsell-upsell-modal__text">{{{ upsellDescription }}}</p>
                    <# } #>
                    <div class="elementsell-upsell-modal__price">
                        <# if ( upsellCrossed > 0 ) { #>
                            <span class="elementsell-upsell-modal__price-old">{{{ formatKc( upsellCrossed ) }}}</span>
                        <# } #>
                        <span class="elementsell-upsell-modal__price-main">{{{ formatKc( upsellPrice ) }}}</span>
                    </div>
                    <button type="button" class="elementsell-upsell-modal__accept platebni-button" style="background-color: {{{ upsellButtonColor }}};" disabled>{{{ upsellAcceptText }}}</button>
                    <button type="button" class="elementsell-upsell-modal__decline" disabled>{{{ upsellDeclineLabel }}}</button>
                </div>
            </div>
            <#   }
               } #>
        </div>

        <style>
        #{{{ wrapperId }}} .elementsell-billing-form-hint {
            display: block;
            margin: 0 auto 16px;
            max-width: 66%;
            padding: 11px 14px;
            border: 1px solid #e6c200;
            border-left: 4px solid #dba617;
            background: #fcf9e8;
            color: #6b5a1e;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.4;
            text-align: center;
            text-decoration: none;
            border-radius: 4px;
            box-sizing: border-box;
        }

        #{{{ wrapperId }}} .elementsell-billing-form-hint:hover,
        #{{{ wrapperId }}} .elementsell-billing-form-hint:focus {
            background: #faf5d8;
            color: #574a16;
        }

        #{{{ wrapperId }}} .elementsell-payment-form {
            width: 100%;
            margin: 0 auto;
        }

        #{{{ wrapperId }}} .elementsell-field {
            display: block;
            width: 100%;
            margin: 0 0 12px;
            padding: 14px 16px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            background: #f9fafb;
            font-size: 16px;
            line-height: 1.4;
            color: #111827;
            box-sizing: border-box;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
            -webkit-appearance: none;
            appearance: none;
        }

        #{{{ wrapperId }}} .elementsell-field::placeholder {
            color: #9ca3af;
        }

        #{{{ wrapperId }}} .elementsell-field:hover {
            border-color: #d1d5db;
            background: #ffffff;
        }

        #{{{ wrapperId }}} .elementsell-field:focus {
            border-color: #9ca3af;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
        }

        #{{{ wrapperId }}} .elementsell-field:-webkit-autofill,
        #{{{ wrapperId }}} .elementsell-field:-webkit-autofill:hover,
        #{{{ wrapperId }}} .elementsell-field:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px #f9fafb inset !important;
            -webkit-text-fill-color: #111827 !important;
            transition: background-color 9999s ease-out 0s;
        }

        #{{{ wrapperId }}} input[type="date"].elementsell-field {
            min-height: 52px;
            color-scheme: light;
        }

        #{{{ wrapperId }}} .elementsell-custom-field--date {
            margin: 0 0 12px;
        }

        #{{{ wrapperId }}} .elementsell-custom-field--date .elementsell-field {
            margin-bottom: 0;
        }

        #{{{ wrapperId }}} .elementsell-field-label {
            display: block;
            margin: 0 0 6px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.4;
            color: #374151;
        }

        #{{{ wrapperId }}} .elementsell-date-value {
            padding: 14px 16px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            background: #f9fafb;
            font-size: 16px;
            line-height: 1.4;
            color: #111827;
            box-sizing: border-box;
        }

        #{{{ wrapperId }}} .elementsell-price-block {
            margin: 4px 0 18px;
            text-align: center;
        }

        #{{{ wrapperId }}} .elementsell-price-old {
            text-decoration: line-through;
            line-height: 1.3;
            margin-bottom: 4px;
        }

        #{{{ wrapperId }}} .elementsell-price-main {
            line-height: 1.2;
            margin: 0 0 18px;
            text-align: center;
        }

        #{{{ wrapperId }}} .elementsell-price-main--solo {
            margin-top: 4px;
        }

        #{{{ wrapperId }}} .platebni-button {
            border: none;
            padding: 14px 48px;
            min-width: 176px;
            cursor: pointer;
            text-align: center;
            white-space: nowrap;
            display: inline-block;
            width: auto;
            max-width: none;
            box-sizing: border-box;
            border-radius: 9999px;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        }

        #{{{ wrapperId }}} .platebni-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
        }

        #{{{ wrapperId }}} .elementsell-custom-switch {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            width: 100%;
            margin: 0 0 12px;
            padding: 4px 2px;
            text-align: left;
            cursor: pointer;
        }

        #{{{ wrapperId }}} .elementsell-custom-switch input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin: 0;
            padding: 0;
            flex: 0 0 auto;
            border: none !important;
            border-radius: 4px;
        }

        #{{{ wrapperId }}} .elementsell-custom-switch span {
            flex: 1 1 auto;
            font-size: 15px;
            line-height: 1.45;
            color: #374151;
        }

        #{{{ wrapperId }}} .elementsell-payment-consent {
            margin: 10px auto 0;
            max-width: 66%;
            font-size: 9px;
            color: #b0b0b0;
            line-height: 1.45;
            text-align: center;
        }

        #{{{ wrapperId }}} .elementsell-payment-consent a {
            color: #b0b0b0;
            text-decoration: underline;
        }

        #{{{ wrapperId }}} .elementsell-payment-byline {
            margin: 10px 0 0;
            font-size: 10px;
            color: #b0b0b0;
            text-align: center;
            letter-spacing: 0.02em;
        }

        #{{{ wrapperId }}} .elementsell-payment-byline a {
            color: #b0b0b0;
            text-decoration: none;
        }

        #{{{ wrapperId }}} .elementsell-payment-byline a:hover {
            color: #888888;
            text-decoration: underline;
        }

        #{{{ wrapperId }}} .elementsell-upsell-editor-preview {
            margin: 24px auto 0;
            max-width: 420px;
            text-align: center;
        }

        #{{{ wrapperId }}} .elementsell-upsell-editor-preview__badge {
            display: inline-block;
            margin: 0 0 8px;
            padding: 4px 10px;
            border-radius: 999px;
            background: #eef2ff;
            color: #4338ca;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        #{{{ wrapperId }}} .elementsell-upsell-editor-preview__hint {
            margin: 0 0 14px;
            font-size: 13px;
            line-height: 1.45;
            color: #6b7280;
        }

        #{{{ wrapperId }}} .elementsell-upsell-editor-preview .elementsell-upsell-modal__card {
            position: relative;
            width: 100%;
            max-width: 420px;
            margin: 0 auto;
            background: #fff;
            border: 1px dashed #c7d2fe;
            border-radius: 16px;
            padding: 24px 22px;
            box-shadow: none;
            text-align: center;
            box-sizing: border-box;
        }

        #{{{ wrapperId }}} .elementsell-upsell-modal__image-wrap {
            margin: 0 0 16px;
            border-radius: 12px;
            overflow: hidden;
            background: #f3f4f6;
        }

        #{{{ wrapperId }}} .elementsell-upsell-modal__image {
            display: block;
            width: 100%;
            height: auto;
            max-height: 320px;
            object-fit: contain;
            object-position: center;
            margin: 0;
            border-radius: 0;
        }

        #{{{ wrapperId }}} .elementsell-upsell-modal__title {
            margin: 0 0 10px;
            font-size: 22px;
            line-height: 1.3;
            color: #111827;
        }

        #{{{ wrapperId }}} .elementsell-upsell-modal__text {
            margin: 0 0 16px;
            font-size: 15px;
            line-height: 1.55;
            color: #4b5563;
        }

        #{{{ wrapperId }}} .elementsell-upsell-modal__price {
            margin: 0 0 18px;
        }

        #{{{ wrapperId }}} .elementsell-upsell-modal__price-old {
            display: block;
            text-decoration: line-through;
            color: #9ca3af;
            font-size: 14px;
            margin-bottom: 4px;
        }

        #{{{ wrapperId }}} .elementsell-upsell-modal__price-main {
            font-size: 28px;
            font-weight: 700;
            color: #111827;
        }

        #{{{ wrapperId }}} .elementsell-upsell-editor-preview .elementsell-upsell-modal__accept {
            width: 100%;
            margin: 0 0 10px;
            cursor: default;
            opacity: 0.92;
        }

        #{{{ wrapperId }}} .elementsell-upsell-editor-preview .elementsell-upsell-modal__decline {
            width: 100%;
            border: 0;
            background: transparent;
            color: #6b7280;
            font-size: 14px;
            padding: 8px;
            cursor: default;
            text-decoration: underline;
            opacity: 0.92;
        }
        </style>
        <?php
    }
}
