{#
    Mondial Relay Pickup Point Picker Widget

    Required variables:
    - siteId: The site ID for API calls
    - initialPostalCode: Optional initial postal code to search
#}

<div class="mondial-relay-picker" id="mondial-relay-picker">
    <div class="mr-picker">
        <!-- Search Box -->
        <div class="mr-search-box">
            <div class="input-group">
                <input type="text"
                       id="mr-postal-code"
                       class="form-control"
                       placeholder="Entrez votre code postal"
                       value="{{ initialPostalCode|default('') }}"
                       maxlength="10">
                <button type="button" id="mr-search-btn" class="btn btn-primary">
                    <i class="fas fa-search"></i> Rechercher
                </button>
            </div>
        </div>

        <!-- Loading State -->
        <div class="mr-loading" id="mr-loading" style="display: none;">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Chargement...</span>
            </div>
            <p class="mt-2 mb-0">Recherche des points relais...</p>
        </div>

        <!-- Error Message -->
        <div class="alert alert-warning" id="mr-error" style="display: none;">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <span id="mr-error-message"></span>
        </div>

        <!-- Results -->
        <div class="mr-content" id="mr-content" style="display: none;">
            <div class="row g-0">
                <!-- Points List -->
                <div class="col-md-5">
                    <div class="mr-list-container">
                        <div class="mr-list-header">
                            <span id="mr-points-count">0</span> points relais trouvés
                        </div>
                        <div class="mr-list" id="mr-points-list">
                            <!-- Points will be inserted here -->
                        </div>
                    </div>
                </div>

                <!-- Map -->
                <div class="col-md-7">
                    <div class="mr-map-container">
                        <div id="mr-map" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Selected Point Display -->
        <div class="mr-selected" id="mr-selected" style="display: none;">
            <div class="alert alert-success">
                <div class="d-flex align-items-start">
                    <div class="me-3">
                        <i class="fas fa-map-marker-alt fa-2x text-success"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="alert-heading mb-1" id="mr-selected-name"></h6>
                        <p class="mb-1" id="mr-selected-address"></p>
                        <small class="text-muted" id="mr-selected-city"></small>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="mr-change-btn">
                        <i class="fas fa-edit"></i> Modifier
                    </button>
                </div>
            </div>
        </div>

        <!-- Hidden inputs for form submission -->
        <input type="hidden" name="relay_point_id" id="relay-point-id" value="">
        <input type="hidden" name="relay_point_data" id="relay-point-data" value="">
    </div>
</div>

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<!-- Mondial Relay Picker Styles -->
<link rel="stylesheet" href="{{ asset('assets/css/mondial-relay-picker.css') }}">

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- Mondial Relay Picker JS -->
<script src="{{ asset('assets/js/mondial-relay-picker.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize the Mondial Relay picker
    const picker = new MondialRelayPicker({
        container: '#mondial-relay-picker',
        siteId: {{ siteId }},
        onSelect: function(point) {
            // Trigger custom event when a point is selected
            const event = new CustomEvent('mondialRelaySelected', { detail: point });
            document.dispatchEvent(event);
        }
    });

    // Store picker instance for external access
    window.mondialRelayPicker = picker;

    {% if initialPostalCode is defined and initialPostalCode %}
    // Auto-search if initial postal code is provided
    picker.search('{{ initialPostalCode }}');
    {% endif %}
});
</script>