@page
@model JobsMedical.Web.Pages.Employer.RegisterFacilityModel
@{
    ViewData["Title"] = "ثبت مرکز درمانی";
}

<div class="page-head">
    <div class="container">
        <h1>ثبت مرکز درمانی</h1>
        <p class="muted">مرکز خود را ثبت کن تا بتوانی شیفت و موقعیت استخدامی منتشر کنی.</p>
    </div>
</div>

<div class="container section" style="max-width:560px;">
    @if (Model.Error is not null)
    {
        <div class="alert" style="background:#fdeaea; color:var(--danger);">@Model.Error</div>
    }
    <form method="post" class="card card-pad">
        <div class="filter-group">
            <label>نام مرکز *</label>
            <input type="text" name="Name" value="@Model.Name" placeholder="مثلاً بیمارستان مهر" />
        </div>
        <div class="filter-group">
            <label>نوع مرکز</label>
            <select name="Type">
                <option value="0">بیمارستان</option>
                <option value="1">کلینیک</option>
                <option value="2">درمانگاه</option>
            </select>
        </div>
        <div class="filter-group">
            <label>شهر *</label>
            <select name="CityId">
                <option value="0">انتخاب کنید…</option>
                @foreach (var c in Model.Cities)
                {
                    <option value="@c.Id" selected="@(Model.CityId == c.Id)">@c.Name</option>
                }
            </select>
        </div>
        <div class="filter-group">
            <label>محله / منطقه</label>
            <select name="DistrictId">
                <option value="">—</option>
                @foreach (var d in Model.Districts)
                {
                    <option value="@d.Id" selected="@(Model.DistrictId == d.Id)">@d.Name</option>
                }
            </select>
        </div>
        <div class="filter-group">
            <label>آدرس</label>
            <input type="text" name="Address" value="@Model.Address" />
        </div>
        <div class="filter-group" style="display:flex; gap:8px;">
            <div style="flex:1;"><label>تلفن</label><input type="tel" name="Phone" value="@Model.Phone" dir="ltr" /></div>
            <div style="flex:1;"><label>شناسه بله</label><input type="text" name="BaleId" value="@Model.BaleId" dir="ltr" /></div>
        </div>
        <div class="filter-group">
            <label>موقعیت مکانی (برای فیلتر «نزدیک من»)</label>
            <div style="display:flex; gap:8px; margin-bottom:8px;">
                <button type="button" id="myLocBtn" class="btn btn-outline" style="flex:1;">📍 موقعیت فعلی من</button>
            </div>
            @if (!string.IsNullOrEmpty(Model.MapKey))
            {
                <div id="facmap" style="height:280px; border-radius:12px; overflow:hidden; border:1px solid var(--line);"></div>
                <p class="muted" style="font-size:12px; margin:6px 0 0;">روی نقشه بزن یا نشانگر را بکش تا موقعیت مرکز مشخص شود.</p>
            }
            else
            {
                <p class="muted" style="font-size:12px; margin:0;">نقشه پیکربندی نشده؛ از دکمه «موقعیت فعلی من» استفاده کن یا مختصات را دستی وارد کن.</p>
            }
            <div style="display:flex; gap:8px; margin-top:8px;">
                <div style="flex:1;"><label style="font-size:12px;">عرض (Lat)</label><input type="number" step="any" id="latInput" name="Lat" value="@Model.Lat" dir="ltr" /></div>
                <div style="flex:1;"><label style="font-size:12px;">طول (Lng)</label><input type="number" step="any" id="lngInput" name="Lng" value="@Model.Lng" dir="ltr" /></div>
            </div>
        </div>
        <div class="filter-group">
            <label>سؤال امنیتی: حاصل <strong>@Model.CaptchaQuestion</strong> چند می‌شود؟</label>
            <input type="text" name="CaptchaAnswer" dir="ltr" inputmode="numeric" autocomplete="off" placeholder="پاسخ" />
            <input type="hidden" name="CaptchaToken" value="@Model.CaptchaToken" />
        </div>
        <button type="submit" class="btn btn-accent btn-block btn-lg">ثبت مرکز و ورود به پنل</button>
    </form>
</div>

@section Scripts {
    @if (!string.IsNullOrEmpty(Model.MapKey))
    {
        <link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" />
        <script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js"></script>
    }
    <script>
        (function () {
            var latEl = document.getElementById('latInput');
            var lngEl = document.getElementById('lngInput');
            var marker = null, map = null;

            function setCoords(lat, lng) {
                latEl.value = (+lat).toFixed(6);
                lngEl.value = (+lng).toFixed(6);
            }

            var mapKey = '@Model.MapKey';
            if (mapKey && window.L && document.getElementById('facmap')) {
                var startLat = parseFloat(latEl.value) || 35.6892;   // Tehran default
                var startLng = parseFloat(lngEl.value) || 51.3890;
                map = new L.Map('facmap', {
                    key: mapKey, maptype: 'neshan', poi: true, traffic: false,
                    center: [startLat, startLng], zoom: 12
                });
                marker = L.marker([startLat, startLng], { draggable: true }).addTo(map);
                if (!latEl.value) { /* no initial pin until user acts */ }
                marker.on('dragend', function (e) { var p = e.target.getLatLng(); setCoords(p.lat, p.lng); });
                map.on('click', function (e) { marker.setLatLng(e.latlng); setCoords(e.latlng.lat, e.latlng.lng); });
            }

            var btn = document.getElementById('myLocBtn');
            if (btn) btn.addEventListener('click', function () {
                if (!navigator.geolocation) { alert('مرورگر شما از موقعیت‌یابی پشتیبانی نمی‌کند.'); return; }
                btn.textContent = 'در حال یافتن موقعیت...'; btn.disabled = true;
                navigator.geolocation.getCurrentPosition(function (pos) {
                    var lat = pos.coords.latitude, lng = pos.coords.longitude;
                    setCoords(lat, lng);
                    if (map && marker) { marker.setLatLng([lat, lng]); map.setView([lat, lng], 15); }
                    btn.textContent = '📍 موقعیت ثبت شد'; btn.disabled = false;
                }, function () {
                    alert('دسترسی به موقعیت داده نشد.'); btn.textContent = '📍 موقعیت فعلی من'; btn.disabled = false;
                });
            });
        })();
    </script>
}
