@extends('app')

@section('title', 'Dostawa – Verve')

@section('content')
<section class="shipping-section">
    <div class="shipping-container glass-panel">
        <h1 class="section-title">Dane dostawy</h1>

        @if ($errors->any())
            <div class="alert-errors glass-panel">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('shipping.store') }}" class="shipping-form glass-panel">
            @csrf

            {{-- Dane kontaktowe (wspólne) --}}
            <div class="form-section">
                <h2 class="form-section-title">{{ __('shop.contact_details') }}</h2>
                <div class="form-grid">
                    <div class="form-field full">
                        <label class="form-label" for="full_name">{{ __('shop.full_name') }}</label>
                        <input id="full_name" type="text" name="full_name" value="{{ old('full_name') }}" class="form-input" required />
                    </div>
                    <div class="form-field">
                        <label class="form-label" for="email">Email</label>
                        <input id="email" type="email" name="email" value="{{ old('email') }}" class="form-input" required />
                    </div>
                    <div class="form-field">
                        <label class="form-label" for="phone">Telefon</label>
                        <input id="phone" type="tel" name="phone" value="{{ old('phone') }}" class="form-input" placeholder="+48 123 456 789" required />
                    </div>
                </div>
            </div>

            {{-- Kod rabatowy (wspólny) --}}
            <div class="form-section">
                <h2 class="form-section-title">{{ __('shop.discount_code') }}</h2>
                <div class="discount-code-wrapper" style="display: flex; gap: 10px; margin-bottom: 20px;">
                    <input type="text" name="discount_code" id="discount_code" value="{{ old('discount_code', session('discount_code')) }}" class="form-input" placeholder="{{ __('shop.discount_placeholder') }}" style="text-transform: uppercase; flex: 1;" />
                    <button type="button" id="applyDiscount" class="btn" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 24px; border: none; border-radius: 12px; cursor: pointer; font-weight: 600;">{{ __('shop.apply') }}</button>
                </div>
                <div id="discount-message" style="margin-top: 10px; padding: 10px; border-radius: 8px; display: none;"></div>
            </div>

            {{-- Zakładki: Polska / Za granicę --}}
            <input type="hidden" name="shipping_tab" id="shipping_tab" value="{{ old('shipping_tab', 'domestic') }}" />

            <div class="shipping-tabs">
                <button type="button" class="shipping-tab {{ old('shipping_tab', 'domestic') === 'domestic' ? 'active' : '' }}" data-tab="domestic">
                    <span class="tab-icon">🇵🇱</span>
                    <span class="tab-label">{{ __('shop.tab_domestic') }}</span>
                </button>
                <button type="button" class="shipping-tab {{ old('shipping_tab') === 'international' ? 'active' : '' }}" data-tab="international">
                    <span class="tab-icon">🌍</span>
                    <span class="tab-label">{{ __('shop.tab_international') }}</span>
                </button>
            </div>

            {{-- ===== TAB: POLSKA ===== --}}
            <div id="tab-domestic" class="tab-content {{ old('shipping_tab', 'domestic') === 'domestic' ? '' : 'hidden' }}">
                <div class="form-section">
                    <h2 class="form-section-title">{{ __('shop.shipping_method') }}</h2>
                    <div class="shipping-methods">
                        <label class="radio-card {{ old('shipping_method', 'inpost') === 'inpost' ? 'active' : '' }}">
                            <input type="radio" name="shipping_method" value="inpost" {{ old('shipping_method', 'inpost') === 'inpost' ? 'checked' : '' }} />
                            <div class="radio-card-content">
                                <span class="radio-title">📦 {{ __('shop.inpost_parcel') }}</span>
                                <span class="radio-desc">{{ __('shop.inpost_desc') }}</span>
                                <span class="radio-price">16.99 PLN</span>
                            </div>
                        </label>
                        <label class="radio-card {{ old('shipping_method') === 'courier' ? 'active' : '' }}">
                            <input type="radio" name="shipping_method" value="courier" {{ old('shipping_method') === 'courier' ? 'checked' : '' }} />
                            <div class="radio-card-content">
                                <span class="radio-title">🚚 {{ __('shop.courier') }}</span>
                                <span class="radio-desc">{{ __('shop.courier_desc') }}</span>
                                <span class="radio-price">19.99 PLN</span>
                            </div>
                        </label>
                        <label class="radio-card {{ old('shipping_method') === 'cod' ? 'active' : '' }}">
                            <input type="radio" name="shipping_method" value="cod" {{ old('shipping_method') === 'cod' ? 'checked' : '' }} />
                            <div class="radio-card-content">
                                <span class="radio-title">💰 {{ __('shop.cod_title') }}</span>
                                <span class="radio-desc">{{ __('shop.cod_desc') }}</span>
                                <span class="radio-price">{{ __('shop.cod_price') }}</span>
                            </div>
                        </label>
                    </div>
                </div>

                <div id="inpost-section" class="form-section {{ old('shipping_method', 'inpost') === 'inpost' ? '' : 'hidden' }}">
                    <h2 class="form-section-title">{{ __('shop.parcel_selection') }}</h2>
                    <div class="locker-selector">
                        <input id="inpost_point" name="inpost_point" value="{{ old('inpost_point') }}" class="form-input" placeholder="{{ __('shop.select_parcel_placeholder') }}" readonly />
                        <button type="button" id="chooseLocker" class="btn-select-locker">
                            <span>📍 {{ __('shop.select_parcel_btn') }}</span>
                        </button>
                    </div>
                    <div id="inpost-map" class="inpost-map-container glass-panel"></div>
                    <p class="helper-text">{{ __('shop.parcel_help') }}</p>
                </div>

                <div id="courier-section" class="form-section {{ old('shipping_method') === 'courier' ? '' : 'hidden' }}">
                    <h2 class="form-section-title">Adres dostawy</h2>
                    <div class="form-grid">
                        <div class="form-field full">
                            <label class="form-label" for="address_line1">Ulica i numer</label>
                            <input id="address_line1" type="text" name="address_line1" value="{{ old('address_line1') }}" class="form-input" placeholder="np. Marszałkowska 1/23" />
                        </div>
                        <div class="form-field full">
                            <label class="form-label" for="address_line2">Uzupełnienie (opcjonalnie)</label>
                            <input id="address_line2" type="text" name="address_line2" value="{{ old('address_line2') }}" class="form-input" placeholder="np. Mieszkanie 5, II piętro" />
                        </div>
                        <div class="form-field">
                            <label class="form-label" for="postal_code">Kod pocztowy</label>
                            <input id="postal_code" type="text" name="postal_code" value="{{ old('postal_code') }}" class="form-input" placeholder="00-000" />
                        </div>
                        <div class="form-field">
                            <label class="form-label" for="city">Miejscowość</label>
                            <input id="city" type="text" name="city" value="{{ old('city') }}" class="form-input" placeholder="Warszawa" />
                        </div>
                    </div>
                </div>

                <div id="cod-section" class="form-section {{ old('shipping_method') === 'cod' ? '' : 'hidden' }}">
                    <h2 class="form-section-title">Adres dostawy (płatność przy odbiorze)</h2>
                    <div class="form-grid">
                        <div class="form-field full">
                            <label class="form-label" for="cod_address_line1">Ulica i numer</label>
                            <input id="cod_address_line1" type="text" name="cod_address_line1" value="{{ old('cod_address_line1') }}" class="form-input" placeholder="np. Marszałkowska 1/23" />
                        </div>
                        <div class="form-field full">
                            <label class="form-label" for="cod_address_line2">Uzupełnienie (opcjonalnie)</label>
                            <input id="cod_address_line2" type="text" name="cod_address_line2" value="{{ old('cod_address_line2') }}" class="form-input" placeholder="np. Mieszkanie 5, II piętro" />
                        </div>
                        <div class="form-field">
                            <label class="form-label" for="cod_postal_code">Kod pocztowy</label>
                            <input id="cod_postal_code" type="text" name="cod_postal_code" value="{{ old('cod_postal_code') }}" class="form-input" placeholder="00-000" />
                        </div>
                        <div class="form-field">
                            <label class="form-label" for="cod_city">Miejscowość</label>
                            <input id="cod_city" type="text" name="cod_city" value="{{ old('cod_city') }}" class="form-input" placeholder="Warszawa" />
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===== TAB: ZA GRANICĘ ===== --}}
            <div id="tab-international" class="tab-content {{ old('shipping_tab') === 'international' ? '' : 'hidden' }}">
                <div class="form-section">
                    <h2 class="form-section-title">{{ __('shop.intl_shipping_method') }}</h2>
                    <div class="shipping-methods">
                        <label class="radio-card active">
                            <input type="radio" name="intl_shipping_method" value="international_courier" checked />
                            <div class="radio-card-content">
                                <span class="radio-title">✈️ {{ __('shop.intl_courier') }}</span>
                                <span class="radio-desc">{{ __('shop.intl_courier_desc') }}</span>
                                <span class="radio-price">80.00 PLN</span>
                            </div>
                        </label>
                    </div>
                </div>

                <div class="form-section">
                    <h2 class="form-section-title">{{ __('shop.intl_address_title') }}</h2>
                    <div class="form-grid">
                        <div class="form-field full">
                            <label class="form-label" for="intl_country">{{ __('shop.intl_country') }}</label>
                            <select id="intl_country" name="intl_country" class="form-input">
                                <option value="">{{ __('shop.intl_country_select') }}</option>
                                <option value="DE" {{ old('intl_country') === 'DE' ? 'selected' : '' }}>{{ __('shop.intl_country_de') }}</option>
                                <option value="FR" {{ old('intl_country') === 'FR' ? 'selected' : '' }}>{{ __('shop.intl_country_fr') }}</option>
                                <option value="NL" {{ old('intl_country') === 'NL' ? 'selected' : '' }}>{{ __('shop.intl_country_nl') }}</option>
                                <option value="BE" {{ old('intl_country') === 'BE' ? 'selected' : '' }}>{{ __('shop.intl_country_be') }}</option>
                                <option value="AT" {{ old('intl_country') === 'AT' ? 'selected' : '' }}>{{ __('shop.intl_country_at') }}</option>
                                <option value="CH" {{ old('intl_country') === 'CH' ? 'selected' : '' }}>{{ __('shop.intl_country_ch') }}</option>
                                <option value="CZ" {{ old('intl_country') === 'CZ' ? 'selected' : '' }}>{{ __('shop.intl_country_cz') }}</option>
                                <option value="SK" {{ old('intl_country') === 'SK' ? 'selected' : '' }}>{{ __('shop.intl_country_sk') }}</option>
                                <option value="DK" {{ old('intl_country') === 'DK' ? 'selected' : '' }}>{{ __('shop.intl_country_dk') }}</option>
                                <option value="SE" {{ old('intl_country') === 'SE' ? 'selected' : '' }}>{{ __('shop.intl_country_se') }}</option>
                                <option value="NO" {{ old('intl_country') === 'NO' ? 'selected' : '' }}>{{ __('shop.intl_country_no') }}</option>
                                <option value="IT" {{ old('intl_country') === 'IT' ? 'selected' : '' }}>{{ __('shop.intl_country_it') }}</option>
                                <option value="ES" {{ old('intl_country') === 'ES' ? 'selected' : '' }}>{{ __('shop.intl_country_es') }}</option>
                                <option value="PT" {{ old('intl_country') === 'PT' ? 'selected' : '' }}>{{ __('shop.intl_country_pt') }}</option>
                                <option value="LT" {{ old('intl_country') === 'LT' ? 'selected' : '' }}>{{ __('shop.intl_country_lt') }}</option>
                                <option value="LV" {{ old('intl_country') === 'LV' ? 'selected' : '' }}>{{ __('shop.intl_country_lv') }}</option>
                                <option value="EE" {{ old('intl_country') === 'EE' ? 'selected' : '' }}>{{ __('shop.intl_country_ee') }}</option>
                                <option value="HU" {{ old('intl_country') === 'HU' ? 'selected' : '' }}>{{ __('shop.intl_country_hu') }}</option>
                                <option value="RO" {{ old('intl_country') === 'RO' ? 'selected' : '' }}>{{ __('shop.intl_country_ro') }}</option>
                                <option value="BG" {{ old('intl_country') === 'BG' ? 'selected' : '' }}>{{ __('shop.intl_country_bg') }}</option>
                                <option value="HR" {{ old('intl_country') === 'HR' ? 'selected' : '' }}>{{ __('shop.intl_country_hr') }}</option>
                                <option value="SI" {{ old('intl_country') === 'SI' ? 'selected' : '' }}>{{ __('shop.intl_country_si') }}</option>
                                <option value="FI" {{ old('intl_country') === 'FI' ? 'selected' : '' }}>{{ __('shop.intl_country_fi') }}</option>
                                <option value="GR" {{ old('intl_country') === 'GR' ? 'selected' : '' }}>{{ __('shop.intl_country_gr') }}</option>
                                <option value="OTHER" {{ old('intl_country') === 'OTHER' ? 'selected' : '' }}>{{ __('shop.intl_country_other_label') }}</option>
                            </select>
                        </div>
                        <div class="form-field full" id="intl_country_other_wrap" style="{{ old('intl_country') === 'OTHER' ? '' : 'display:none' }}">
                            <label class="form-label" for="intl_country_other">{{ __('shop.intl_country_other') }}</label>
                            <input id="intl_country_other" type="text" name="intl_country_other" value="{{ old('intl_country_other') }}" class="form-input" placeholder="e.g. Australia" />
                        </div>
                        <div class="form-field full">
                            <label class="form-label" for="intl_address_line1">{{ __('shop.intl_address_line1') }}</label>
                            <input id="intl_address_line1" type="text" name="intl_address_line1" value="{{ old('intl_address_line1') }}" class="form-input" placeholder="e.g. 123 Main Street" />
                        </div>
                        <div class="form-field full">
                            <label class="form-label" for="intl_address_line2">{{ __('shop.intl_address_line2') }}</label>
                            <input id="intl_address_line2" type="text" name="intl_address_line2" value="{{ old('intl_address_line2') }}" class="form-input" placeholder="e.g. Apt 4B" />
                        </div>
                        <div class="form-field">
                            <label class="form-label" for="intl_city">{{ __('shop.intl_city') }}</label>
                            <input id="intl_city" type="text" name="intl_city" value="{{ old('intl_city') }}" class="form-input" placeholder="e.g. Berlin" />
                        </div>
                        <div class="form-field">
                            <label class="form-label" for="intl_postal_code">{{ __('shop.intl_postal_code') }}</label>
                            <input id="intl_postal_code" type="text" name="intl_postal_code" value="{{ old('intl_postal_code') }}" class="form-input" placeholder="e.g. 10115" />
                        </div>
                        <div class="form-field full">
                            <label class="form-label" for="intl_state">{{ __('shop.intl_state') }}</label>
                            <input id="intl_state" type="text" name="intl_state" value="{{ old('intl_state') }}" class="form-input" placeholder="e.g. Bavaria, California" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <a href="{{ url('/') }}" class="btn-secondary">← {{ __('shop.back_to_shop') }}</a>
                <button type="submit" class="btn-primary">{{ __('shop.proceed_to_payment') }} →</button>
            </div>
        </form>
    </div>
</section>
@endsection

@push('styles')
<link rel="stylesheet" href="https://geowidget.easypack24.net/css/easypack.css" />
<style>
:root {
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    --text-primary: #f7f7fb;
    --text-secondary: rgba(247, 247, 251, 0.65);
    --accent: rgba(255, 255, 255, 0.12);
    --accent-strong: rgba(255, 255, 255, 0.25);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

.glass-panel {
    background: rgba(20, 20, 25, 0.45);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--glass-shadow);
}

.shipping-section {
    padding: 120px 1rem 4rem;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.shipping-container {
    width: min(960px, 100%);
    padding: clamp(1.5rem, 2vw, 2.5rem);
}

.section-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: var(--text-primary);
}

.alert-errors {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    border-color: rgba(255, 96, 96, 0.35);
    background: rgba(255, 60, 60, 0.12);
}

.alert-errors ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #ffb3b3;
    font-size: 0.95rem;
}

.shipping-form {
    padding: clamp(1.75rem, 2.2vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field.full {
    grid-column: span 2;
}

.form-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.form-input {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-strong);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(255, 255, 255, 0.02);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
    color: var(--text-primary);
}

select.form-input option {
    background: #1a1a22;
    color: var(--text-primary);
    padding: 0.5rem;
}

select.form-input:focus {
    background-color: rgba(255, 255, 255, 0.06);
}

.shipping-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.radio-card {
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    overflow: hidden;
}

.radio-card input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.radio-card-content {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.radio-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.radio-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.radio-price {
    font-size: 1rem;
    font-weight: 600;
    color: #4ade80;
    margin-top: 0.5rem;
}

.radio-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-strong);
    background: rgba(255, 255, 255, 0.05);
}

.radio-card.active {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.locker-selector {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.btn-select-locker {
    padding: 0.85rem 1.5rem;
    border-radius: 14px;
    border: 1px solid var(--accent);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-select-locker:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.helper-text {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.inpost-map-container {
    margin-top: 1.5rem;
    height: 400px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(20, 20, 25, 0.45);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--glass-shadow);
}

.inpost-map-container .leaflet-container {
    height: 100%;
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
}

.inpost-map-container .leaflet-tile {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.inpost-map-container .leaflet-bar a {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.inpost-map-container .leaflet-bar a:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* -------- Tabs -------- */
.shipping-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.shipping-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.1rem 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

.shipping-tab:hover {
    transform: translateY(-3px);
    border-color: var(--accent-strong);
    background: rgba(255, 255, 255, 0.05);
}

.shipping-tab.active {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.tab-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.tab-label {
    letter-spacing: 0.01em;
}

.tab-content {
    animation: tabFadeIn 0.3s ease;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-secondary,
.btn-primary {
    padding: 0.9rem 2.2rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.btn-secondary {
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    background: transparent;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.06);
}

.btn-primary {
    border: none;
    background: linear-gradient(135deg, #ffffff, #bfbfdc);
    color: #101015;
    box-shadow: 0 20px 45px rgba(190, 190, 220, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 55px rgba(190, 190, 220, 0.35);
}

/* ---------------------------- InPost modal theme ---------------------------- */

.verve-inpost-overlay {
    background: rgba(10, 10, 12, 0.82) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    z-index: 99999 !important;
}

.verve-inpost {
    font-family: 'Inter', sans-serif !important;
    color: var(--text-primary) !important;
}

.verve-inpost * {
    font-family: inherit !important;
    color: inherit !important;
}

.verve-inpost .widget-modal,
.verve-inpost .modal,
.verve-inpost .modal-content {
    background: rgba(18, 18, 22, 0.96) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden !important;
}

.verve-inpost header,
.verve-inpost .modal-header {
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1.5rem !important;
}

.verve-inpost input,
.verve-inpost select {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1rem !important;
}

.verve-inpost input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.verve-inpost input:focus,
.verve-inpost select:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

.verve-inpost button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.4rem !important;
    transition: transform 0.2s ease, background 0.2s ease;
}

.verve-inpost button:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: translateY(-1px) !important;
}

.verve-inpost button[type="submit"],
.verve-inpost .btn-primary,
.verve-inpost .submit-button {
    background: linear-gradient(135deg, #ffffff, #d4d4f0) !important;
    color: #14141c !important;
    border: none !important;
    box-shadow: 0 12px 30px rgba(210, 210, 240, 0.3) !important;
    border-radius: 999px !important;
    padding: 0.85rem 2.4rem !important;
}

.verve-inpost .btn-primary:hover,
.verve-inpost .submit-button:hover {
    box-shadow: 0 16px 40px rgba(210, 210, 240, 0.4) !important;
}

.verve-inpost .point-item,
.verve-inpost .list-item,
.verve-inpost li {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    margin: 0.5rem 0 !important;
    padding: 1rem !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.verve-inpost .point-item:hover,
.verve-inpost li:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateX(4px) !important;
}

.verve-inpost .point-item.selected,
.verve-inpost .point-item.active {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
}

.verve-inpost .leaflet-container {
    background: #111118 !important;
    border-radius: 18px !important;
}

.verve-inpost .leaflet-tile {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
}

.verve-inpost .leaflet-bar a {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.verve-inpost .leaflet-bar a:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

.verve-inpost .tab,
.verve-inpost [role="tab"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: var(--text-secondary) !important;
    margin: 0 0.35rem !important;
    padding: 0.65rem 1.4rem !important;
}

.verve-inpost [role="tab"][aria-selected="true"] {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: var(--text-primary) !important;
}

.verve-inpost .widget-modal-close,
.verve-inpost .close,
.verve-inpost .close-modal {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: var(--text-primary) !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
}

.verve-inpost .widget-modal-close:hover,
.verve-inpost .close-modal:hover {
    background: rgba(255, 71, 87, 0.25) !important;
    border-color: rgba(255, 71, 87, 0.45) !important;
    transform: rotate(90deg) scale(1.05) !important;
}

.verve-inpost .sidebar,
.verve-inpost .filters,
.verve-inpost .point-details {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
}

.verve-inpost .modal-body {
    background: transparent !important;
}

.verve-inpost a {
    color: rgba(180, 196, 255, 0.8) !important;
}

.verve-inpost a:hover {
    color: rgba(220, 230, 255, 0.95) !important;
}

@media (max-width: 1024px) {
    .shipping-container {
        padding: 1.75rem;
    }

    .shipping-form {
        padding: 1.75rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field.full {
        grid-column: span 1;
    }

    .locker-selector {
        flex-direction: column;
    }

    .inpost-map-container {
        height: 350px;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-secondary,
    .btn-primary {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .shipping-section {
        padding: 100px 0.75rem 2.5rem;
    }

    .section-title {
        font-size: 2.1rem;
    }

    .shipping-container {
        padding: 1.5rem;
    }

    .inpost-map-container {
        height: 300px;
    }

    .shipping-tabs {
        grid-template-columns: 1fr;
    }

    .shipping-tab {
        padding: 0.9rem 1.2rem;
        font-size: 0.95rem;
    }
}
</style>
@endpush

@push('scripts')
<script src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    // ───── Tab switching ─────
    const tabs = document.querySelectorAll('.shipping-tab');
    const tabDomestic = document.getElementById('tab-domestic');
    const tabInternational = document.getElementById('tab-international');
    const shippingTabInput = document.getElementById('shipping_tab');

    const switchTab = (tabName) => {
        tabs.forEach(t => t.classList.toggle('active', t.dataset.tab === tabName));
        tabDomestic.classList.toggle('hidden', tabName !== 'domestic');
        tabInternational.classList.toggle('hidden', tabName !== 'international');
        shippingTabInput.value = tabName;

        // Disable inputs in hidden tab so they don't get submitted
        tabDomestic.querySelectorAll('input, select').forEach(el => el.disabled = tabName !== 'domestic');
        tabInternational.querySelectorAll('input, select').forEach(el => el.disabled = tabName !== 'international');
    };

    tabs.forEach(tab => {
        tab.addEventListener('click', () => switchTab(tab.dataset.tab));
    });

    // Initialize correct tab state
    switchTab(shippingTabInput.value || 'domestic');

    // ───── "Other country" field toggle ─────
    const intlCountrySelect = document.getElementById('intl_country');
    const intlCountryOtherWrap = document.getElementById('intl_country_other_wrap');
    if (intlCountrySelect) {
        intlCountrySelect.addEventListener('change', () => {
            intlCountryOtherWrap.style.display = intlCountrySelect.value === 'OTHER' ? '' : 'none';
        });
    }

    // ───── Domestic shipping method switching ─────
    const shippingRadios = document.querySelectorAll('input[name="shipping_method"]');
    const radioCards = document.querySelectorAll('#tab-domestic .radio-card');
    const inpostSection = document.getElementById('inpost-section');
    const courierSection = document.getElementById('courier-section');
    const codSection = document.getElementById('cod-section');
    const chooseLockerButton = document.getElementById('chooseLocker');
    const inpostInput = document.getElementById('inpost_point');
    let sdkInitialized = false;

    const toggleSections = (value) => {
        inpostSection.classList.toggle('hidden', value !== 'inpost');
        courierSection.classList.toggle('hidden', value !== 'courier');
        if (codSection) {
            codSection.classList.toggle('hidden', value !== 'cod');
        }
    };

    shippingRadios.forEach((radio) => {
        radio.addEventListener('change', (event) => {
            const currentValue = event.target.value;
            toggleSections(currentValue);
            radioCards.forEach((card) => card.classList.remove('active'));
            event.target.closest('.radio-card')?.classList.add('active');
        });
    });

    const initial = document.querySelector('input[name="shipping_method"]:checked');
    if (initial) {
        toggleSections(initial.value);
    }

    // ───── InPost SDK ─────
    const initSdk = () => {
        if (!sdkInitialized && window.easyPack && typeof window.easyPack.init === 'function') {
            window.easyPack.init({ mapType: 'osm', lang: 'pl' });
            sdkInitialized = true;
        }
    };

    const initMap = () => {
        if (!window.easyPack || typeof window.easyPack.mapWidget !== 'function') {
            console.error('easyPack mapWidget not available');
            return;
        }
        window.easyPack.mapWidget('inpost-map', (point) => {
            if (point && (point.name || point.id)) {
                inpostInput.value = point.name || point.id;
            }
        }, {
            points: { types: ['parcel_locker'] }
        });
    };

    chooseLockerButton?.addEventListener('click', (event) => {
        event.preventDefault();
        initSdk();
        initMap();
    });

    const observer = new MutationObserver(() => {
        if (!inpostSection.classList.contains('hidden') && !document.querySelector('#inpost-map .leaflet-container')) {
            initSdk();
            setTimeout(initMap, 100);
        }
    });
    observer.observe(inpostSection, { attributes: true, attributeFilter: ['class'] });

    // ───── Discount code validation ─────
    const applyDiscountBtn = document.getElementById('applyDiscount');
    const discountCodeInput = document.getElementById('discount_code');
    const discountMessage = document.getElementById('discount-message');

    applyDiscountBtn?.addEventListener('click', async () => {
        const code = discountCodeInput.value.trim();

        if (!code) {
            discountMessage.textContent = 'Wpisz kod rabatowy';
            discountMessage.style.display = 'block';
            discountMessage.style.background = '#fee';
            discountMessage.style.color = '#c33';
            return;
        }

        applyDiscountBtn.disabled = true;
        applyDiscountBtn.textContent = 'Sprawdzam...';

        try {
            const response = await fetch('{{ route("discount.validate") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ code })
            });

            const data = await response.json();

            discountMessage.style.display = 'block';
            discountMessage.textContent = data.message;

            if (data.valid) {
                discountMessage.style.background = '#efe';
                discountMessage.style.color = '#383';
                discountCodeInput.value = data.code;
                discountCodeInput.readOnly = true;
                applyDiscountBtn.textContent = '✓ Zastosowano';
            } else {
                discountMessage.style.background = '#fee';
                discountMessage.style.color = '#c33';
                applyDiscountBtn.disabled = false;
                applyDiscountBtn.textContent = 'Zastosuj';
            }
        } catch (error) {
            discountMessage.style.display = 'block';
            discountMessage.textContent = 'Błąd sprawdzania kodu';
            discountMessage.style.background = '#fee';
            discountMessage.style.color = '#c33';
            applyDiscountBtn.disabled = false;
            applyDiscountBtn.textContent = 'Zastosuj';
        }
    });
});
</script>
@endpush