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

/**
 * Elementor Widget: Carei Reservation form in modal.
 */
class Carei_Reservation_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'carei-reservation';
    }

    public function get_title() {
        return 'Carei Reservation';
    }

    public function get_icon() {
        return 'eicon-form-horizontal';
    }

    public function get_categories() {
        return array( 'general' );
    }

    public function get_style_depends() {
        return array( 'carei-reservation-css' );
    }

    public function get_script_depends() {
        return array( 'carei-reservation-js' );
    }

    protected function register_controls() {
        $this->start_controls_section( 'content_section', array(
            'label' => 'Przycisk rezerwacji',
            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
        ) );

        $this->add_control( 'button_text', array(
            'label'   => 'Tekst przycisku',
            'type'    => \Elementor\Controls_Manager::TEXT,
            'default' => 'Złóż zapytanie o rezerwację',
        ) );

        $this->end_controls_section();
    }

    protected function render() {
        $settings    = $this->get_settings_for_display();
        $button_text = esc_html( $settings['button_text'] );
        ?>
        <button type="button" class="carei-reservation-trigger" data-carei-open-modal>
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
            <?php echo $button_text; ?>
        </button>

        <div class="carei-modal-overlay" data-carei-modal role="dialog" aria-modal="true" aria-labelledby="carei-modal-title">
            <div class="carei-modal">
                <span role="button" tabindex="0" class="carei-modal-close" data-carei-close-modal aria-label="Zamknij formularz">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
                    </svg>
                </span>
                <h2 class="carei-modal-title" id="carei-modal-title">Wypełnij formularz rezerwacji<span>.</span></h2>

                <form class="carei-form" id="carei-reservation-form" novalidate>

                    <!-- Dane wynajmu -->
                    <div class="carei-form__section">
                        <div class="carei-form__row carei-form__row--top">
                            <div class="carei-form__field">
                                <div class="carei-form__select-wrap">
                                    <select id="carei-segment" name="segment" required>
                                        <option value="" disabled selected>Wybierz segment pojazdu</option>
                                    </select>
                                    <svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
                                </div>
                            </div>
                            <div class="carei-form__field carei-form__field--date">
                                <div class="carei-form__date-wrap">
                                    <svg class="carei-form__date-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3" width="11" height="10" rx="0.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 1.5v2M5 1.5v2M2.5 5.5h11" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                    <label class="carei-form__date-label" for="carei-date-from">Od kiedy?</label>
                                    <input type="datetime-local" id="carei-date-from" name="dateFrom" class="carei-form__input carei-form__input--date" required>
                                </div>
                            </div>
                            <div class="carei-form__field carei-form__field--date">
                                <div class="carei-form__date-wrap">
                                    <svg class="carei-form__date-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3" width="11" height="10" rx="0.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 1.5v2M5 1.5v2M2.5 5.5h11" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                    <label class="carei-form__date-label" for="carei-date-to">Do kiedy?</label>
                                    <input type="datetime-local" id="carei-date-to" name="dateTo" class="carei-form__input carei-form__input--date" required>
                                </div>
                            </div>
                        </div>

                        <div class="carei-form__days-count" id="carei-days-count">Wybrano: <strong>0 dni</strong></div>

                        <div class="carei-form__row carei-form__row--pickup">
                            <div class="carei-form__field">
                                <div class="carei-form__select-wrap carei-form__select-wrap--icon">
                                    <svg class="carei-form__icon-pin" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z" fill="currentColor"/></svg>
                                    <select id="carei-pickup-branch" name="pickupBranch" required>
                                        <option value="" disabled selected>Miejsce odbioru</option>
                                    </select>
                                    <svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
                                </div>
                            </div>
                            <label class="carei-form__checkbox-label carei-form__checkbox-label--inline">
                                <input type="checkbox" id="carei-same-return" name="sameReturn" checked>
                                <span class="carei-form__checkbox-box">
                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </span>
                                <span class="carei-form__checkbox-text">Zwrot w tej samej lokalizacji</span>
                            </label>
                        </div>

                        <div class="carei-form__field carei-form__field--full carei-form__return-wrap" id="carei-return-wrap" style="display:none;">
                            <div class="carei-form__select-wrap carei-form__select-wrap--icon">
                                <svg class="carei-form__icon-pin" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z" fill="currentColor"/></svg>
                                <select id="carei-return-branch" name="returnBranch">
                                    <option value="" disabled selected>Miejsce zwrotu</option>
                                </select>
                                <svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
                            </div>
                        </div>
                    </div>

                    <!-- Ubezpieczenie + Opcje dodatkowe (ukryte do wybrania segmentu i miejsca odbioru) -->
                    <div id="carei-extras-wrapper" class="carei-form__extras-wrapper" style="display:none;">

                        <div class="carei-form__divider"><span>Wyjazd zagraniczny</span></div>
                        <div class="carei-form__section" id="carei-abroad-section" style="display:none;">
                            <label class="carei-form__checkbox-label carei-form__checkbox-label--abroad">
                                <input type="checkbox" id="carei-abroad-toggle" name="abroadToggle">
                                <span class="carei-form__checkbox-box"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
                                <span>Planuję trasę poza granicę Polski</span>
                            </label>
                            <div id="carei-abroad-search" class="carei-abroad" style="display:none;">
                                <div class="carei-abroad__input-wrap">
                                    <svg class="carei-abroad__plus-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                                    <input type="text" id="carei-abroad-input" class="carei-abroad__input" placeholder="Wyszukaj i dodaj kraj na trasie">
                                    <span role="button" tabindex="0" class="carei-abroad__clear" id="carei-abroad-clear" title="Wyczyść">
                                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    </span>
                                </div>
                                <div class="carei-abroad__results" id="carei-abroad-results"></div>
                                <div class="carei-abroad__selected" id="carei-abroad-selected"></div>
                            </div>
                        </div>

                        <div class="carei-form__divider"><span>Ubezpieczenie</span></div>
                        <div class="carei-form__section">
                            <div class="carei-form__row" id="carei-insurance-container">
                                <!-- Dynamicznie z API pricelist -->
                            </div>
                        </div>

                        <div class="carei-form__divider"><span>Opcje dodatkowe</span></div>
                        <div class="carei-form__section">
                            <div class="carei-form__row" id="carei-extras-container">
                                <!-- Dynamicznie z API pricelist -->
                            </div>
                        </div>

                    </div>

                    <!-- Dane najemcy -->
                    <div class="carei-form__divider"><span>Dane najemcy</span></div>

                    <div class="carei-form__section">
                        <div class="carei-form__row">
                            <div class="carei-form__field">
                                <div class="carei-form__float-wrap">
                                    <input type="text" id="carei-firstname" name="firstName" class="carei-form__input carei-form__input--float" placeholder=" " required>
                                    <label class="carei-form__float-label" for="carei-firstname">Imię</label>
                                </div>
                            </div>
                            <div class="carei-form__field">
                                <div class="carei-form__float-wrap">
                                    <input type="text" id="carei-lastname" name="lastName" class="carei-form__input carei-form__input--float" placeholder=" " required>
                                    <label class="carei-form__float-label" for="carei-lastname">Nazwisko</label>
                                </div>
                            </div>
                        </div>

                        <div class="carei-form__row carei-form__row--address">
                            <div class="carei-form__field">
                                <div class="carei-form__float-wrap">
                                    <input type="text" id="carei-city" name="city" class="carei-form__input carei-form__input--float" placeholder=" " required>
                                    <label class="carei-form__float-label" for="carei-city">Miejscowość</label>
                                </div>
                            </div>
                            <div class="carei-form__field carei-form__field--zipcode">
                                <div class="carei-form__float-wrap">
                                    <input type="text" id="carei-zipcode" name="zipCode" class="carei-form__input carei-form__input--float" placeholder=" " maxlength="6" required>
                                    <label class="carei-form__float-label" for="carei-zipcode">Kod pocztowy</label>
                                </div>
                            </div>
                            <div class="carei-form__field">
                                <div class="carei-form__float-wrap">
                                    <input type="text" id="carei-street" name="street" class="carei-form__input carei-form__input--float" placeholder=" " required>
                                    <label class="carei-form__float-label" for="carei-street">Ulica i nr domu</label>
                                </div>
                            </div>
                        </div>

                        <div class="carei-form__row">
                            <div class="carei-form__field">
                                <div class="carei-form__float-wrap">
                                    <input type="email" id="carei-email" name="email" class="carei-form__input carei-form__input--float" placeholder=" " required>
                                    <label class="carei-form__float-label" for="carei-email">Adres e-mail</label>
                                </div>
                            </div>
                            <div class="carei-form__field">
                                <div class="carei-form__phone-wrap">
                                    <label class="carei-form__phone-label" for="carei-phone">Nr telefonu</label>
                                    <div class="carei-form__phone-row">
                                        <div class="carei-form__phone-prefix">
                                            <span class="carei-form__phone-flag">🇵🇱</span>
                                            <span class="carei-form__phone-code">+48</span>
                                        </div>
                                        <input type="tel" id="carei-phone" name="phone" class="carei-form__input carei-form__input--phone" placeholder="___  ___  ___" required>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="carei-form__row">
                            <div class="carei-form__field">
                                <div class="carei-form__float-wrap">
                                    <input type="text" id="carei-pesel" name="pesel" class="carei-form__input carei-form__input--float" placeholder=" " maxlength="11" required>
                                    <label class="carei-form__float-label" for="carei-pesel">PESEL</label>
                                </div>
                            </div>
                            <div class="carei-form__field"></div>
                        </div>

                        <div class="carei-form__field carei-form__field--full">
                            <textarea id="carei-message" name="message" class="carei-form__textarea" placeholder="Twoja wiadomość dotycząca rezerwacji" rows="4"></textarea>
                        </div>
                    </div>

                    <!-- Stopka -->
                    <div class="carei-form__footer">
                        <label class="carei-form__checkbox-label carei-form__checkbox-label--privacy">
                            <input type="checkbox" id="carei-privacy" name="privacy" required>
                            <span class="carei-form__checkbox-box">
                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                            <span class="carei-form__checkbox-text">Zgadzam się na <a href="/polityka-prywatnosci/" target="_blank">Politykę Prywatności</a></span>
                        </label>
                        <button type="submit" class="carei-form__submit" aria-busy="false">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
                            Wyślij
                        </button>
                    </div>

                    <div class="carei-form__error-summary" id="carei-error-summary" style="display:none;">
                        Uzupełnij wymagane pola zaznaczone na czerwono.
                    </div>

                </form>

                <!-- Podsumowanie kosztów (po submit) -->
                <div id="carei-summary-overlay" class="carei-summary" style="display:none;">
                    <h3 class="carei-summary__title" tabindex="-1">Podsumowanie rezerwacji<span>.</span></h3>
                    <div class="carei-summary__details" id="carei-summary-details"></div>
                    <div class="carei-summary__table" id="carei-summary-table"></div>
                    <div class="carei-summary__total" id="carei-summary-total"></div>
                    <div class="carei-summary__error" id="carei-summary-error" style="display:none;"></div>
                    <div class="carei-summary__actions">
                        <button type="button" class="carei-summary__btn carei-summary__btn--back" id="carei-summary-back">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            Wróć do formularza
                        </button>
                        <button type="button" class="carei-summary__btn carei-summary__btn--confirm" id="carei-summary-confirm" aria-busy="false">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
                            Potwierdź rezerwację
                        </button>
                    </div>
                </div>

                <!-- Sukces -->
                <div id="carei-success-view" class="carei-success" style="display:none;">
                    <div class="carei-success__icon">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <h3 class="carei-success__title" tabindex="-1">Rezerwacja złożona!</h3>
                    <p class="carei-success__number" id="carei-success-number"></p>
                    <p class="carei-success__message">Potwierdzenie zostanie wysłane na podany adres e-mail.</p>
                    <button type="button" class="carei-success__close" id="carei-success-close">Zamknij</button>
                </div>

            </div>
        </div>
        <?php
    }
}
