@*
    Leaflet Map Picker - Reusable Partial View

    Usage:
    @await Html.PartialAsync("_LeafletMapPicker", new LeafletMapPickerModel
    {
        MapId = "map-picker",
        LatInputId = "latitude-input",
        LngInputId = "longitude-input",
        SearchInputId = "search-location",
        SearchResultsId = "search-results",
        ClearSearchBtnId = "clear-search",
        Label = "Pilih Lokasi di Peta",
        HelpText = "Cari lokasi menggunakan search box di atas, atau klik pada peta untuk menentukan lokasi secara manual"
    })
*@

@model dynamic

@{
    var mapId = ViewData["MapId"]?.ToString() ?? "map-picker";
    var latInputId = ViewData["LatInputId"]?.ToString() ?? "latitude-input";
    var lngInputId = ViewData["LngInputId"]?.ToString() ?? "longitude-input";
    var searchInputId = ViewData["SearchInputId"]?.ToString() ?? "search-location";
    var searchResultsId = ViewData["SearchResultsId"]?.ToString() ?? "search-results";
    var clearSearchBtnId = ViewData["ClearSearchBtnId"]?.ToString() ?? "clear-search";
    var label = ViewData["Label"]?.ToString() ?? "Pilih Lokasi di Peta";
    var helpText = ViewData["HelpText"]?.ToString() ?? "Cari lokasi menggunakan search box di atas, atau klik pada peta untuk menentukan lokasi secara manual";
    var showLabel = ViewData["ShowLabel"] == null ? true : (ViewData["ShowLabel"] is bool labelValue && labelValue);
    var showSearch = ViewData["ShowSearch"] == null ? true : (ViewData["ShowSearch"] is bool searchValue && searchValue);
    var showHelpText = ViewData["ShowHelpText"] == null ? true : (ViewData["ShowHelpText"] is bool helpValue && helpValue);
}

<div class="leaflet-map-picker-container">
    @if (showLabel)
    {
        <label class="text-sm font-semibold text-gray-700 mb-2 block">
            <i class="ph ph-map-pin me-2"></i>
            @label
        </label>
    }

    @if (showSearch)
    {
        <!-- Search Box -->
        <div class="leaflet-map-picker-search">
            <div class="relative">
                <input
                    type="text"
                    id="@searchInputId"
                    class="input leaflet-map-picker-search-input"
                    placeholder="Cari lokasi (nama tempat, alamat, kota)..."
                    autocomplete="off"
                />
                <i class="ph ph-magnifying-glass leaflet-map-picker-search-icon"></i>
                <button
                    type="button"
                    id="@clearSearchBtnId"
                    class="leaflet-map-picker-clear-btn hidden"
                >
                    <i class="ph ph-x"></i>
                </button>
            </div>
            <!-- Search Results Dropdown -->
            <div id="@searchResultsId" class="leaflet-map-picker-results hidden"></div>
        </div>
    }

    <div id="@mapId" class="leaflet-map-picker"></div>

    @if (showHelpText)
    {
        <p class="leaflet-map-picker-help-text">
            <i class="ph ph-info me-1"></i>
            @helpText
        </p>
    }
</div>