@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

            <div class="form-section">
                <h2 class="form-section-title">Dane kontaktowe</h2>
                <div class="form-grid">
                    <div class="form-field full">
                        <label class="form-label" for="full_name">Imię i nazwisko</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>

            <div class="form-section">
                <h2 class="form-section-title">Metoda dostawy</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">📦 Paczkomat InPost</span>
                            <span class="radio-desc">Odbierz w wybranym paczkomacie</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">🚚 Kurier</span>
                            <span class="radio-desc">Dostawa pod wskazany adres</span>
                            <span class="radio-price">19.99 PLN</span>
                        </div>
                    </label>
                </div>
            </div>

            <div id="inpost-section" class="form-section {{ old('shipping_method', 'inpost') === 'courier' ? 'hidden' : '' }}">
                <h2 class="form-section-title">Wybór paczkomatu</h2>
                <div class="locker-selector">
                    <input id="inpost_point" name="inpost_point" value="{{ old('inpost_point') }}" class="form-input" placeholder="Kliknij przycisk, aby wybrać paczkomat" readonly />
                    <button type="button" id="chooseLocker" class="btn-select-locker">
                        <span>📍 Wybierz paczkomat</span>
                    </button>
                </div>
                <div id="inpost-map" class="inpost-map-container glass-panel"></div>
                <p class="helper-text">Po wyborze paczkomatu dane zostaną automatycznie uzupełnione.</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 class="form-actions">
                <a href="{{ url('/') }}" class="btn-secondary">← Wróć do sklepu</a>
                <button type="submit" class="btn-primary">Dalej do płatności →</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);
}

.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);
}

.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;
    }
}
</style>
@endpush

@push('scripts')
<script src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const shippingRadios = document.querySelectorAll('input[name="shipping_method"]');
    const radioCards = document.querySelectorAll('.radio-card');
    const inpostSection = document.getElementById('inpost-section');
    const courierSection = document.getElementById('courier-section');
    const chooseLockerButton = document.getElementById('chooseLocker');
    const inpostInput = document.getElementById('inpost_point');
    let sdkInitialized = false;

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

    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);
    }

    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();
    });

    // Initialize map when InPost section is visible
    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'] });
});
</script>
document.addEventListener('DOMContentLoaded', function() {
@endpush